javascript - 为什么手机使用 jQuery 检测疯狂的宽度 ('body' ).width();

Question

通常我使用简单的 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..)。我不知道为什么。它在桌面浏览器上运行良好，如果我将其调整为移动尺寸，宽度将被很好地计算。

我正在寻找解决方案，但此时完全陷入困境。

Answer 1

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

您可以通过以下方式修复该问题:

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