2

出于测试目的，我设置了这个页面：http ://www.fondationmartinmatte.com/test.html 它在 html 桌面浏览器中非常好，但在移动设备中总是有一个来自地狱的垂直灰色条。它来自哪里以及我应该告诉 html 代码用于移动设备的设置。首先是那个代码：<meta name="viewport" content="width=device-width">这使整个事情变得更糟。我只是删除它，这是灰色条。如何解决这个问题，提前谢谢

4

2 回答 2

11

尝试使用这些：

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>

此外，您可能希望获得比您当前拥有的更复杂的 CSS 重置（边距：0，填充：0）。在浏览器兼容性方面，这里有一些很棒的功能可以让您的生活更轻松：

http://www.cssreset.com/

于 2012-08-09T08:09:41.823 回答
2

这会将您的网站扩展到设备

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

下面的两行用于用户将您的网站添加到其 iOS 设备的主页时。第一行是当他们单击添加的图标时，它不会在 safari 中打开，第二行定义当他们从主页打开您的网站时状态栏（带有电池指示器和时间的栏）颜色。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

更多信息在这里：http: //developer.apple.com/library/safari/documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

于 2012-08-10T22:53:12.390 回答