CODEWITHSUNDEEP
cssresponsive-design
sark9012
sark9012

Reputation: 5717

Clarity on responsive design pixel width

New to responsive design and I'm trying to work something out.

The Galaxy Note 2 has a pixel dimension of 1280 x 720 and I specify the following CSS:

@media (min-width:769px){
     #mobile{
         display:none;
     }
     #tablet{
         display:none;
     }
     #desktop{
         width:100px;
         float:left;
         background-color:green;
     }
 }
 @media (min-width:321px) and (max-width:768px){
     #desktop{
         display:none;
     }
     #tablet{
         width:100px;
         float:left;
         background-color:black;
         color:white;
     }
     #mobile{
         display:none;
     }
 }

 @media (max-width:320px){
     #desktop{
         display:none;
     }
     #mobile{
         width:100px;
         float:left;
         background-color:blue;
         color:white;
     }
     #tablet{
         display:none;
     }
 }

The phone (as expected) shows the mobile "version" of the site but I don't understand why it falls into the <321px category when it has the dimension previously mentioned!

The following code does this?

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Hope for some help with this! Thanks :)

Upvotes: 1

Views: 1276

Answers (2)

meobyte
meobyte

Reputation: 1320

It's because css uses "device independent pixels" which aren't the same as device pixels. You could also use media queries on the pixel ratio to select devices with a higher density of pixels.

A List Apart: A Pixel Identity Crisis

Additionally, please note that the actual resolution is not lower. The browser is just using a different unit of measurement.

Upvotes: 1

Mooseman
Mooseman

Reputation: 18891

Browsers on some mobile devices use a lower resolution to speed up the renderer. You can use JS to check what width and height the browser is using.

alert('Window: '+$(document).width()+'x'+$(document).height());

Fiddle: http://jsfiddle.net/fGVAg/

Upvotes: 0

Related Questions