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 or any tips of making the site better viewed on Mobile IE?

Thanks for the help!

回答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.

回答2:

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

回答3:

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