Question

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

Answer 1

尝试使用这些：

<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重置（margin：0，padding：0）。这里有一些很棒的功能可以让您的浏览器兼容性变得更轻松：

http://www.cssreset.com/

Answer 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

iPad和iPhone上的浏览器宽度不是100％，其余的都可以

2 个答案: