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（＆＃39; body＆＃39;）。width（）检测设备宽度，然后将css类应用于html标记。通常它工作得很好，我已经多次使用它了。

问题在于我正在更新这个网站：

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

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

我正在寻找解决方案，但此刻完全停滞不前。

Answer 1

除非您使用$route['default_controller'] = '****'; // mantion the desired controller after login IN元素，否则手持设备上的浏览器通常会模拟具有典型桌面窗口大小的浏览器，并缩放内容以适应它。这种模拟扩展到JavaScript关于显示器的实际大小。

你可以用以下方法解决这个问题：

<meta name="viewport">

Answer 2

使用

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

应该有效

为什么手机会使用jQuery检测疯狂的宽度（＆＃39; body＆＃39;）。width（）;

2 个答案: