Search code examples
mobileresponsive-designwindows-phone

Smartphone Browser resolution

I've been writing a HTML5/jQuery responsive template for a website based on viewport dimensions. I'm using an HTC 8X for some testing and while the screen resolution for the device is 1280x720 the width of the viewport in the browser is reported as 320px portrait and 480 in landscape (reversed for portrait orientation)?

While this isn't a problem as such, I wondered why this happens? And does this happen across all smartphones (iOS, 'Droid and Windows Phone).

Thanks in advance.

Solution

  • the browser in windows mobile and iOS support the meta MobileOptimized to tell the browser what res to report.

    ie. you can tell the browser to report and react as if it was 320 wide by using

    <meta name="MobileOptimized" content="320"/>