Search code examples
jquerywindowwidthsmartphone

Jquery $(window).width more than expected


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


Solution

  • 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?