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

Question

Usually I manage responsive design with a simple javascript script:

// 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";
  }

}

The goal is detecting the device width with jQuery('body').width(), and then apply a css class to html tag. Normally it works perfectly, I already used it several times.

The problem is with this website I am updating:

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

The client want it responsive, so I installed my script. But in this case, it's not working. When I reach the website with mobile phone (I tried with iPhone 5S & Samsung S4), the script detects a crazy width (980px..). I don't know why. It's working well on desktop browser, if I resize it to mobile dimensions, the width will be well calculated.

I am looking for a solution, but completely stuck at this moment.

Have you checked this: http://stackoverflow.com/a/9477057/1782481 ? — varevarao, Jan 12 '16 at 12:01
Any special reason you don't use CSS [media queries](https://developer.mozilla.org/de/docs/Web/CSS/Media_Queries/Using_media_queries) (or if you have to use JavaScript, [`window.matchMedia`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia))? — RoToRa, Jan 12 '16 at 13:01

score 2 · Accepted Answer · answered Jan 12 '16 at 13:03

Unless you use a <meta name="viewport"> element, browsers on handheld devices will typically emulate a browser with a typical desktop window size and scale the content to fit it. This emulation extends to lying to JavaScript about the actual size of the display.

You can fix that with:

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

score -1 · Answer 2 · answered Jan 12 '16 at 12:59

-1

using

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

should work

answered Jan 12 '16 at 12:59

Penguin

49
1
8

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

2 Answers2