prevent IE Mobile from scaling web pages automatic

问题:

I have not been able to get IE mobile to stop automatically resizing my site design. I am using three stylesheets with media queries to display the site differently on different device screens. I've included the meta tag so it shows the mobile stylesheet on IE mobile but it keeps setting the viewport at 320X480 instead of using the actual size of 480X800. How can I force it to display at the actual screen size instead of scaling for a smaller resolution?

回答1:

IE Mobile interprets width=device-width as width=320 (in portrait mode) and as width=480px (in landscape mode) for compatibility reasons. See http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx for full details.

As far as I can tell, the only way to force IE Mobile to display at "actual screen size" is by hardcoding the viewport value to be width=480 (portrait mode). Note that this might have unintended side effects in other browsers, or even already when you switch to landscape mode (too small/large zoom level).

回答2:

Personally I always use the following:

<meta name="mobileoptimized" content="0" />

This is a very helpful page: http://msdn.microsoft.com/en-us/library/dd938878.aspx