$(window).width()没有正确地给出视口宽度

时间:2017-05-05 11:08:11

标签: javascript jquery html css twitter-bootstrap

我几乎总是使用$(window).width()来检查视口宽度。它通常适用于浏览器和设备。但是对于我需要在视口宽度小于768px时显示特定闪屏的网站,这不起作用。它给出了一个正确的宽度,但是低于它可以保持980px,无论我做什么样的浏览器。这个网站有一些特殊的条件:

  1. 此网站在开始时(使用引导程序)响应,但后来没有响应。为此,我们删除了viewport元标记,并在css中设置了以下规则,以覆盖其响应宽度:

    .container {width:1170px; }

  2. 如果我调整整个浏览器的大小,即包含所有浏览器标签的窗口,那么它确实提供了正确的宽度(也小于980px,这是所需的行为),但如果我使用开发工具并使用移动设备布局从那里然后宽度从未报告低于980px。

  3. 仅仅调整主浏览器窗口的大小是不重要的,但问题是它在设备中也不起作用。我添加了一个警报,并且在移动设备上,宽度从未被警告小于980px。

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

1 个答案:

答案 0 :(得分:1)

我似乎无法找到任何权威来源,但有很多网页提到智能手机假设网站宽度为980px,除非另有说明。

例如

Apple's developer site

  

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

     

图3-4 320和980视口宽度的比较

     

enter image description here

(顺便说一下,iPhone首先是这样做的,但其他手机很快就会出现。)

所以解决方案是要么

if ($result !== FALSE)

进入头部(在您的情况下,返回进入头部),或者,确认该网站现在没有响应,并且无法在手机上以最佳状态执行!