Saturday, 2 August 2014

How to fix your asp.net site to be responsive on windows phone


       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);
    }
}

No comments:

Post a Comment