Jquery $(window).width more than expected

Question

In JavaScript, using the following code on a Samsung S5:

alert( $( window ).width() );

I get a value of 980.

When I go to the site:

http://pieroxy.net/blog/pages/css-media-queries/test-features.html

I get a value for "px dimensions width" of 360px.

1) Why the difference ?

2) How do I then go about detecting the real 360px width using jquery?

Thanks,

David

Answer 1

There is a difference between Real Resolution and CSS Resolution. It depends from pixel ratio. in S5 it is 3/1

For instance:

Samsung Galaxy S5 resolution:

Real resolution: 1080X1920

CSS resolution: 360X640

More about second question - What are best practices for detecting pixel ratio/density?

Answer 2

The specs of your browser in your desktop are the same as in the smartphone? Maybe some bug or resolution issue caused this error due different browsers versions or you are not updating the data correctly.

You can check the viewport using the following code:

function viewport(display) {
        if(display) {

          // Width and height
          var height = $(window).height();
          var width = $(window).width();

          // Screen resize listener
          $(window).resize(function() {
              height = $(window).height();
              width = $(window).width();
              console.log('Height: '+height+' Width: '+width);
          });
        }
    }
 
    viewport(true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You could check the info about $.width() here (http://api.jquery.com/width/). If you are somehow working with responsiveness, you could opt to use CSS instead Javascript. There are plenty of tutorials and articles about this (http://learn.shayhowe.com/advanced-html-css/responsive-web-design/) that may interest you. Also, you could use some frameworks like Bootstrap (http://getbootstrap.com/) to handle this for you.

Hope that helps (: