Mobile resolution and CSS aspect ratio

0
votes

I'm building web application using RWD. I've written media queries for different resolutions say 1024, 768 and 320.

I'm using below metatag to decide page width

<meta  name="viewport" content="width=device-width, initial-scale=1" />

There are few devices e.g. iPhone 5 with resolution - 1136×640. When I'm opening my webpage in iPhone its displaying 320 layout in landscape mode where as its resolution says its 1136px wide.

I know it has CSS pixel ratio as 2 but not sure logic between CSS pixel ratio, media query width and device resolution calculation.

Is there are any article or link that explains this and will tell why its displaying 320 layout for iPhone.

Thanks in advanced.

1
cssresponsive-designmedia-queries
Here is THE article about this..quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html – vsync
What is your desired out come, also show some code.. – fred randall

1 Answers

1
votes

Try using this meta declaration instead:

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