我几乎总是使用$(window).width()检查视口宽度。它通常适用于浏览器和设备。但是对于一个网站,如果视口宽度小于768像素,则需要在其中显示特定的启动屏幕,这是行不通的。它给出了正确的宽度,但到了某个点,它仍然保持980px的宽度,无论我使浏览器多么狭窄。该站点有一些特殊条件:


该站点在开始时就具有响应能力(使用引导程序),但随后却没有响应。为此,我们删除了viewport元标记,并在css中设置了以下规则以覆盖其响应宽度:

.container {宽度:1170px; }
如果我调整整个浏览器的大小,即包含所有浏览器选项卡的窗口,那么它的确给出正确的宽度(也小于980px,这是所需的行为),但是如果我使用开发工具并从那里使用移动布局,则宽度为从未报告低于980像素。
它只需要调整主浏览器窗口的大小就可以了,但是问题在于它在设备中也不起作用。我添加了一个警报,在移动设备上,宽度从未被警告小于980px。


有人可以提出一些解决方案或解释为什么它不能按预期工作吗?

最佳答案

我似乎找不到任何权威来源,但是除非另有说明,否则有很多页面提到智能手机假定网站的宽度为980px。

例如Apple's developer site


  大多数网页都很好地适合可见区域,并且视口的纵向宽度设置为980像素,如图3-4所示。如果iOS上的Safari未将视口宽度设置为980像素,则仅显示网页的左上角(以灰色显示)。但是,此默认设置不适用于所有网页,因此,如果您的网页不同,则需要使用视口元标记。有关视口的更多信息,请参见Supported Meta Tags
  
  图3-4 320和980视口宽度的比较
  
  


(顺便说一下,首先是iPhone做到了这一点,但随后又出现了其他手机。)

所以解决方案是

<meta name="viewport" content="width=device-width">


进入头脑风暴(在您的情况下,又回到头脑),或者承认该站点现在没有响应,并且在手机上无法达到最佳性能!

09-10 01:21
查看更多