Question

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

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

我的值为980。

当我去网站时：

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

我得到360px的“px尺寸宽度”的值。

1）为什么会有差异？

2）如何使用jquery检测真正的360px宽度？

谢谢，

大卫

Answer 1

Real Resolution和CSS Resolution之间存在差异。这取决于像素比率。在S5中它是3/1

例如：

三星Galaxy S5分辨率：

真实分辨率：1080X1920

CSS分辨率：360X640

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

Answer 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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

希望有所帮助（：

Jquery $（window）.width超出预期

2 个答案: