width=device-width not working in Mobile IE

Question

Hi,

I'm trying to make a website that works well on mobile phones. So far every phone that I have tested works well, but phones with Windows Mobile IE. It seem that Mobile IE just reads over the <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"/> and is not setting the width to device-width.

Anyone have any experience with this or any tips of making the site better viewed on Mobile IE?

Thanks for the help!

Answer 1

Mobile IE seems to only respect the viewport meta tag if you're specifying an actual width. To get the page width to follow the actual device width, use a mobileoptimized meta tag with content set to 0:

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

Details on MSDN: http://msdn.microsoft.com/en-us/library/dd938878.aspx

If you combine this with the viewport meta tag as above, this should give you what you're looking for across most mobile browsers.