为什么手机会用 jQuery('body').width() 检测到疯狂的宽度；答案

【问题标题】：Why mobile phones detect crazy widths with jQuery('body').width();为什么手机会用 jQuery('body').width() 检测到疯狂的宽度；
【发布时间】：2016-01-12 21:03:28
【问题描述】：

我通常使用简单的 javascript 脚本来管理响应式设计：

// Change width value on page load
jQuery(document).ready(function(){
    responsive_resize();
});

// Change width value on user resize, after DOM
jQuery(window).resize(function(){
     responsive_resize();
});

function responsive_resize(){
 // var current_width = window.innerWidth;
 var current_width = jQuery('body').width();
 alert(current_width);

  //Responsive width
  if((current_width < 481)){
    jQuery('html').addClass("responsive-layout-mobile").removeClass("responsive-layout-narrow").removeClass("responsive-layout-normal").removeClass("tablet").removeClass("responsive-layout-wide");
    responsive_class = "responsive-layout-mobile";
  }else if(current_width < 768){
    jQuery('html').addClass("responsive-layout-mobile").removeClass("responsive-layout-narrow").removeClass("responsive-layout-normal").removeClass("tablet").removeClass("responsive-layout-wide");
    responsive_class = "responsive-layout-mobile";
  }else if (current_width < 992){
    jQuery('html').addClass("responsive-layout-narrow").removeClass("responsive-layout-normal").removeClass("responsive-layout-mobile").removeClass("tablet").removeClass("responsive-layout-wide");
    responsive_class = "responsive-layout-narrow";
  }else if (current_width < 1200){
    jQuery('html').addClass("responsive-layout-normal").removeClass("responsive-layout-wide").removeClass("responsive-layout-mobile").removeClass("responsive-layout-narrow").removeClass("tablet");
    responsive_class = "responsive-layout-normal";
  }else if(current_width >= 1200){
    jQuery('html').addClass("responsive-layout-wide").removeClass("responsive-layout-normal").removeClass("responsive-layout-mobile").removeClass("responsive-layout-narrow").removeClass("tablet");
    responsive_class = "responsive-layout-wide";
  }

}

目标是使用 jQuery('body').width() 检测设备宽度，然后将 css 类应用于 html 标签。正常来说效果很好，我已经用过好几次了。

问题出在我正在更新的这个网站上：

http://www.futurephotography.krown.ch/fr/portfolio/all

客户希望它响应，所以我安装了我的脚本。但在这种情况下，它不起作用。当我用手机访问网站时（我尝试使用 iPhone 5S 和三星 S4），脚本检测到一个疯狂的宽度（980px ..）。我不知道为什么。它在桌面浏览器上运行良好，如果我将其调整为移动尺寸，宽度将得到很好的计算。

我正在寻找解决方案，但此时完全卡住了。

【问题讨论】：

你检查过这个吗：stackoverflow.com/a/9477057/1782481？
有什么特殊原因你不使用 CSS media queries（或者如果你必须使用 JavaScript，window.matchMedia）？

标签： javascript html

【解决方案1】：

除非您使用<meta name="viewport"> 元素，否则手持设备上的浏览器通常会模拟具有典型桌面窗口大小的浏览器并缩放内容以适应它。这种模拟扩展到向 JavaScript 谎报显示器的实际大小。

您可以通过以下方式解决此问题：

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

【讨论】：

【解决方案2】：

使用

var current_width = parseInt(jQuery('body').width());

应该工作

【讨论】：