css – 没有身体内容的iPad横向上的额外身高(iOS7)

前端之家收集整理的这篇文章主要介绍了css – 没有身体内容的iPad横向上的额外身高(iOS7)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
问题:
在横向模式下在iOS7 iPad上加载上面的URL时,会有一个垂直滚动条.没有正文内容,它正常化了body / html margin / padding.要明确这是我可以提供的最小测试用例,因此缺少内容和空白页面.

演示:
http://fiddle.jshell.net/AKRCa/show/

我试过的事情:
将视口设置为:

<Meta name="viewport" content="width=device-width,initial-scale=1.0">

<Meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0">`

其他一些信息:
我无法访问运行iOS6的iPad,但我使用browserstack在运行iOS6的iPad3上测试了该演示,并且没有滚动条,所以看起来这个bug仅限于iOS7.

iPhone肖像也没有滚动条,但iPhone风景确实如此.

解决方法

好吧经过一些测试( The result of which are here)我已经确定了两件事:

>这个错误(至少我认为这是一个错误…)与webkit滚动有关,并不会实际影响你的网站/应用程序的高度
>如果它是您正在创建的单页应用程序,则需要将此JS添加到其中以防止任何滚动事件触发.这也可以防止弹性过度滚动效果和垂直滚动条问题.

document.ontouchmove = function(event){
  event.preventDefault();
}

JsFiddle显示了我做的实验.希望有所帮助!

猜你在找的CSS相关文章