Question

所以我正在喝Kool Aid并尝试使用VS 2013和Bootstrap创建一个响应式ASP.NET网站，我遇到了一个我不明白且不知道如何处理的问题。 / p>

该网站似乎进展顺利，当我在网络浏览器和各种Windows Phone模拟器中查看网站时，所有Bootstrap内容似乎都正常工作。问题是当我在实际的物理Windows Phone上查看时，网站不的行为正常。

我的手机正在运行Windows Phone 8.0，模拟器声称正在模拟WP 8.1。我假设这可以解释行为上的差异，但我不确定，我真的不知道如何解决这个问题。

为了简化问题，我在VS中创建了一个空白的ASP.NET Web应用程序，并将足够的东西从Site.Master复制到Site.Mobile.Master中，以便创建一个Bootstrap导航栏。然后我将整个内容上传到Azure，以便能够在线查看。

显然我不能在这里发布图片，也不能发布超过两个链接，因此描述正在发生的事情是一个有点挑战。

我在OneDrive上共享了一个文件夹，其中包含两个屏幕截图以及项目中的Site.Master和Site.Mobile.Master。我没有修改任何其他文件。文件夹的地址为http://1drv.ms/1lCW0TA。

在此文件夹中，您将看到＆＃34;模拟器屏幕Shot.jpg＆＃34;这是我创建的页面在8.1模拟器中的样子。您会注意到顶部导航栏几乎是人们对Bootstrap网站的期望。

你也会看到＆＃34; Phone Screen Shot.jpg＆＃34;这是我的移动设备上相同的网站。请注意，顶部导航是一团糟。

如果您想在自己的设备上查看，地址为http://mobilemenus.azurewebsites.net。

所以，我的问题是，

1）这里发生了什么？ WP 8.0中的浏览器无法正确呈现这些内容吗？或者我做错了什么导致它无法正常工作？

2）更重要的是，我该如何解决这个问题？鉴于这个例子有多简单，我很难相信我是世界上唯一遇到这个问题的人，但我在网上找不到任何关于这个问题的讨论。

该网站在我的Kindle上运行良好。不幸的是我没有iPhone可以测试，所以我不知道它在真正的iPhone上是什么样的。

我希望能够在接下来的几周内完成并部署它，如果在现有的Windows手机上正常工作，那肯定会很好。

提前感谢您的帮助。

-Rob

Answer 1

这看起来完全正常。您最有可能使用屏幕分辨率较小的模拟器。默认模拟器使用480x800屏幕分辨率。您的设备的分辨率宽度为768x1280（从screenshot获得的值。您可以将bootstraps逻辑更改为不具有767/768的最小/最大宽度和一些css。我已经消失了通过执行查找/替换来更改我的bootstrap.css的本地副本。您还可以创建一个覆盖某些值的新css文件。您将要在主引导程序css之后加载该css文件。测试屏幕分辨率的一种方便方法是使用Chrome。点击F12打开调试工具，当你更改chrome的大小时，它会在右上角显示页面的分辨率。

Answer 2

这是针对WIndows Phone 8的Internet Explorer 10上的一个众所周知的错误。由于您使用的是ASP.NET，因此您有机会在主页上修复服务器端。

        var style = new StringBuilder(
            "<style type=\"text/css\">" +
            "@-webkit-viewport{width:device-width}" +
            "@-moz-viewport{width:device-width}" +
            "@-ms-viewport{width:device-width}" +
            "@-o-viewport{width:device-width}" +
            "@viewport{width:device-width}");
        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>");
        var placeholder = new Literal {Text = style.ToString()};
        Page.Header.Controls.Add(placeholder)

Here's the whole article to fix the windows phone bug

ASP.NET Mobile站点无法在Windows Phone 8.0上运行

2 个答案: