Jquery $(window).width 超出预期答案

【问题标题】：Jquery $(window).width more than expectedJquery $(window).width 超出预期
【发布时间】：2014-11-24 05:42:15
【问题描述】：

在 JavaScript 中，在三星 S5 上使用以下代码：

alert( $( window ).width() );

我得到的值为 980。

当我访问网站时：

http://pieroxy.net/blog/pages/css-media-queries/test-features.html

我得到的“像素尺寸宽度”值为 360 像素。

1) 为什么会有差异？

2) 然后我如何使用 jquery 检测真正的 360px 宽度？

谢谢，

大卫

【问题讨论】：

您的预期宽度是多少？这与纵向和横向有什么关系吗？

标签： jquery window width smartphone

【解决方案1】：

真实分辨率和 CSS 分辨率是有区别的。这取决于像素比率。在 S5 中是 3/1

例如：

三星 Galaxy S5 分辨率：

真实分辨率：1080X1920

CSS 分辨率：360X640

更多关于第二个问题 - What are best practices for detecting pixel ratio/density?

【讨论】：

我阅读了您提供的链接。将此添加到我的 HTML 中：将我到 Jquery 的链接更新到版本 2.1.1 之后它起作用了。谢谢！

【解决方案2】：

您桌面上的浏览器规格与智能手机上的规格相同吗？可能是由于浏览器版本不同或您没有正确更新数据而导致此错误的一些错误或解决问题。

您可以使用以下代码检查视口：

function viewport(display) {
        if(display) {

          // Width and height
          var height = $(window).height();
          var width = $(window).width();

          // Screen resize listener
          $(window).resize(function() {
              height = $(window).height();
              width = $(window).width();
              console.log('Height: '+height+' Width: '+width);
          });
        }
    }
 
    viewport(true);

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

您可以在此处 (http://api.jquery.com/width/) 查看有关 $.width() 的信息。如果您以某种方式使用响应能力，则可以选择使用 CSS 而不是 Javascript。有很多关于这个 (http://learn.shayhowe.com/advanced-html-css/responsive-web-design/) 的教程和文章可能会让你感兴趣。此外，您可以使用 Bootstrap (http://getbootstrap.com/) 等框架来为您处理此问题。

希望有所帮助（：

【讨论】：