Question

I’ve been having all sorts of problems using media queries on a Desire HD because the Android browser automatically renders the page at a higher resolution and scales it down. Basically it thinks it has a much wider screen width than it has.

I found that the solution to this was to stop it scaling using the Meta Viewport tag…

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

At first this seems to have worked because it’s firing the correct media query. The phone has a horizontal resolution of 480px and it was firing my (320px-480px) media query.

I then used some javascript to output the computed viewport to the screen…

var windowWidth = $(window).width();
$('div.windowWidthLabel').text("Window Width: " + windowWidth + "px");

The computed with was 369px which I thought was very strange. I then checked it with a media query that had min and max set to 369px and it fired (which at least matches). So why does the browser think it’s 369px when the native resolution is 480px?

Any help would really be appreciated.

Jon

Answer 1

Didn’t find an exact answer for this but I’m finding it’s best not to work with exact resultions of devices when it comes to media queries anyway, just adjust your media queries until the content looks right 🙂