好的所以有问题的网站是这样的:现在，如果您在该网站上注意到，白色背景div的分辨率为445px，横跨y686px长。它也是流动的，所以如果你缩小它，它会看起来不同以适应不同的尺寸。(如果您使用的手机宽度小于400px，它实际上会显示不同的图像)。好的，但问题在于此页面在Android设备上显示不正确，如下所示。该手机以及该预览器中480像素x800像素的所有其他手机都以这种方式显示网站。如果您点击它，您会看到该网站的最大高度为686像素，那么为什么这个移动设备上没有显示整个页面呢？“playplanet”Logo的大小实际上是180像素，它几乎填满了整个宽度，而该手机的宽度应该是480
我已经将我的html页面的bodycss设置为100%并且没有边距或填充，但它仍然没有通过以下GoogleLighthouse审核“内容大小适合视口(viewport)”。Theauditpassesifwindow.innerWidth===window.outerWidth它说视口(viewport)大小是422px而窗口大小是412px，所以这意味着窗口比想要的宽10px。当我检查body元素时，它显示为412像素宽。我想通过这次审核，请问是什么原因造成的？ 最佳答案 当您显示DevTools面板时，它通常会出现在主应用程序页
我正在努力研究如何在Bootstrap3中实现以下目标:我有一个主要基于Bootstrap的固定容器网格的HTML页面。在页面的一半位置，我想要一行包含不同大小的列。我希望这些列中的内容(文本/图像)与固定容器网格中列中的内容对齐。我希望最左边和最右边的列的背景颜色向右延伸到页面边缘。如果我说明我正在努力实现的目标，它可能会有所帮助:如有任何帮助，我们将不胜感激!更新:根据要求，这是我目前拥有的一些代码示例:http://www.bootply.com/ZzOefJGRRq如您所见，流体容器中的文本和列没有正确排列。 最佳答案 Bo
我有这样的移动设备css代码:@mediaalland(min-width:0px)and(max-width:991px){...}我有这样的html:window.onload=function(){if(screen.width主要问题是，当我第一次打开我的网站时:在大多数设备上我必须缩放我的浏览器View以适应它...是否可以自动适配设备？例如，如果设备宽度是340:我应该将它缩小一点(因为网站对于340像素来说太大了(它；smin.640px))...如果是900:那么也应该缩放...甚至是ipad(在纵向模式下，因为它的宽度是768px)。有可能吗？傻瓜:https://p
在使用基于flexbox容器的布局减少视口(viewport)后，我注意到一个小差异。以下代码段包含两个容器(.container和.subcontainer)内的一些链接。在Chrome(45测试版)中，无论视口(viewport)尺寸如何，具有element类的div都具有相同的宽度。但是，在Firefox(40)中，每个div的宽度会根据其内容而变化。html,body{margin:0;padding:0;}.container{position:relative;display:flex;flex-direction:column;width:50%;}.element{fl
我正在尝试制作一个基于JQuery的通用javascript对话框类，以创建以屏幕为中心的div弹出窗口。在所有常见的浏览器中实现这一点很简单。对于移动平台，会出现视口(viewport)的问题；可见视口(viewport)(这是您当前看到的站点的“查看窗口”，放大或不放大)和布局视口(viewport)(底层页面的尺寸，或者换句话说，CSS视口(viewport))的区别。对于Iphone，我已经能够使用DOM属性window.innerWidth和window.innerHeight来调整缩放的居中，并使用pageXOffset/pageYOffset来调整平移，其中://Getd
尝试创建一个始终固定在网站顶部的菜单。遵循zurb.foundation的文档，但.sticky的行为总是出乎意料。或者也许我没有得到一些明显的信息？请在此处检查重建:http://codepen.io/mister-hansen/pen/wMgrPm如果网站向下滚动，并恰好达到初始视口(viewport)的高度，粘性插件会将元素.sticky从is-stuckis-at-top更改为:.is-anchored.is-at-bottom所以.sticky消失了。谢谢。更新文档的第一部分:foundation.zurb.com/sites/docs/sticky.html解释了所描述的行
烦人的问题!当我放大视口(viewport)窗口(在Firefox、chrome中发生)然后向右水平滚动时，我的背景图像被剪裁图像最能描述正在发生的事情:放大-图像仅与视口(viewport)一样宽缩小出路-没有出现问题以下是我的CSS中可能相关的一些部分:article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{width:100%;}header#header{width:100%;}header#header#background-image{
我的帖子是关于http://www.thepostboard.net的我需要让当前覆盖100%视口(viewport)的黑框改为覆盖整个页面。只有当您的屏幕需要滚动条才能查看网站时，您才会注意到这一点——否则它看起来不错。我将覆盖的div设置为:position:absolute;height:100%;width:100%;我也有body设置为:height:100%;margin:0px0px;padding:0px;0px;但出于某种原因，如果我在笔记本电脑上向下滚动，我会看到DIV的边缘，并且它下面没有任何东西被阻挡。这样做的目的是为网站创建一个自定义灯箱。我已禁用使框变暗的J
我使用Disqus在我的Ghost模板上发表评论，但我遇到了麻烦。Disqus里面的图片如果它们不在视口(viewport)内，请不要加载。调试我可以找到:如果我删除overflow:auto来自.surface-container图像出现。如果我删除height:100%来自.surface-container图像出现。如果您缩小浏览器，则会显示图像。但是，如果我删除任何这些属性，抽屉将无法正常工作，如果您打开抽屉，网站会向上滚动。这似乎是浏览器问题，而不是与css相关的问题:/FiddleRealScenario 最佳答案 试试
