Question

我使用Bootstrap开发了一个响应式ASP.NET网站。除了Windows Phone之外，它在所有智能手机上都能完美调整。 IE10有什么问题？

Answer 1

这是一个众所周知的IE10错误。我想你有一个真正的Windows手机，因为使用模拟器通常不可能试验这个bug。原因是IE10对视口宽度的使用不好，您可以在official Bootstrap documentation中找到此错误。如果您使用的是ASP.NET，则很容易修复它，只需将以下代码添加到您的母版页：

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

如果您需要更多信息，我写了一篇关于此的文章。 How to fix your ASP.NET site to be responsive on Windows Phone

我的ASP.NET网站在Windows Phone上没有响应

1 个答案: