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 ).
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
Lumina).
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);
}
}
{
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);
}
}
No comments:
Post a Comment