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

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/