Question

I am trying to implement responsive web design and I have set the viewport size like this:

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

I thought that it would make the viewport width size whatever the width the device has. Let say a Samsung Galaxy Nexus which has 720px would make a viewport size which is 720px, however it reports that the viewport size is 320px, that is the half width size.

I am using CSS media queries and I checked with alert($(window).width());

It uses this:

<link href="css/mobile-medium.css" media="all and (min-width: 320px) and (max-width: 479px)" rel="stylesheet" type="text/css" />

Instead of this:

<link href="css/mobile-large.css" media="all and (min-width: 480px) and (max-width: 767px)" rel="stylesheet" type="text/css" />

I don’t understand why it does this!? The same happens on other Android devices as well as iPhone 4(S).

How are you going to understand what you match with the different css media queries when the size it reports is totally different?

Answer 1

The issue would likely be caused by higher pixel density (-webkit-min-device-pixel-ratio property) and could be handled as suggested here: Media queries in CSS

Edit:

This link could provide some insight, but to be honest I’m out of my depth here right now: http://menacingcloud.com/?c=highPixelDensityDisplays