There is a well-known bug on Internet Explorer 10 for WIndows Phone 8 that avoids responsive web sites to display correctly. The cause is that Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in your favorite responsive CSS framework (for example Twitter Bootstrap or Foundation).
Be careful that if you're testing the web site using mobile emulators, may be you'll not be able to experiment the bug. You have to use a real Windows Phone (e.g. Nokia Lumia).
To fix it on the client side you have to add CSS and JavaScript declarations in all your pages, but if you are using ASP.NET, you can add the following lines of code in your master page and the whole web site will be fixed.
public partial class SiteMaster : MasterPage
{
public void FixWinPhoneIE10Responsiveness(Page page)
{
// Build the base style declaration
var style = new StringBuilder(
"<style type=\"text/css\">" +
"@-moz-viewport{width:device-width}" +
"@-ms-viewport{width:device-width}" +
"@-o-viewport{width:device-width}" +
"@viewport{width:device-width}");
// If the request comes from IE10 on Windows Phone
//add an additional declaration
var browserCapabilities = page.Request.Browser;
if (String.Compare(browserCapabilities.Browser, "IEMobile",
StringComparison.OrdinalIgnoreCase) == 0 &&
browserCapabilities.MajorVersion == 10 &&
browserCapabilities.MinorVersionString == "0")
style.Append("@-ms-viewport{width:auto!important}");
style.Append("</style>");
// Add the style declaration in the page head section
var placeholder = new Literal {Text = style.ToString()};
page.Header.Controls.Add(placeholder);
}
protected void Page_Load(object sender, EventArgs e)
{
FixWinPhoneIE10Responsiveness(Page);
}
}
Did you find this article useful?
Please help us to spread it over the web using Twitter.
You have only to press the button here below!