width=device-width not working in Mobile IE

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 o开发者_运维知识库r any tips of making the site better viewed on Mobile IE?

Thanks for the help!

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.

in CSS write this

@-ms-viewport{
    width: device-width;
}

or in html:

<style type="text/css">
  @-ms-viewport{
  width: device-width;
  }
</style>

and after work device-width

For versions of IE Mobile older than Windows Phone 7, the Viewport is not recognized - you should use the mobileoptimized tag as shown above.