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

What is your expected width? Does this have anything to do with portrait vs landscape? — Kolban, Nov 23 '14 at 21:39

score 0 · Accepted Answer · edited May 23 '17 at 10:33

0

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?

edited May 23 '17 at 10:33

Community

1
1

answered Nov 23 '14 at 21:40

you-rick

185
1
3
12

I read the links you provided. Added this to my HTML: Updated my link to Jquery to Version 2.1.1 After that it worked. Thanks! – Cymro Nov 24 '14 at 20:17

score 0 · Answer 2 · answered Nov 23 '14 at 21:42

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 (:

Jquery $(window).width more than expected

2 Answers2