Welcome to Idea R | Branding - Web Agency - Digital Strategies
Switch to the mobile layout

      Idea R - Do others know who you are? Design your corporate identity

Blog

Take a software geek from the 80s, add a new generation graphic designer and dilute with a longtime marketing strategist. Shake vigorously and you'll get the Idea R's blog.

Change language... italiano

How to fix your ASP.NET site to be responsive on Windows Phone

Published on 7/31/2014
Categories: Web Design
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 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?

If you think your friends will like it too, share it on Facebook.
You have only to press the button here below!

 

You are the reader number 4,654.

Comments

Previous article

Previous article

How to make your website look great on social media

Next article

Mental marketing secret #3: the unconscious buddy

Next article

Scroll to top