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

Why mobile phones detect crazy widths with jQuery('body').width();

本文关键字：疯狂 检测 body jQuery 为什么 手机 width      更新时间：2023-09-26

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

我正在寻找一个解决方案，但目前完全陷入困境。

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

你可以用来解决这个问题

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

使用

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

应该工作

相关文章：