我认为使用相关单位开始我的新项目是个好主意.当我正在研究它时,我正在检查chrome仿真,以确保一切在这些设备上运行良好,并且它看起来很好.
然后我把它推到了heroku,它在我的Macbook上看起来很不错,但是当我真正将它加载到我的iPad上时,我想把它扔出窗外……
#bannerTop {
position:relative;
text-align: center;
width:100vw;
height:70vh;
min-height: 70vh !important;
max-height:70vh !important;
background-image: asset-url('skycloudsalpha.jpg');
background-repeat: no-repeat;
background-position: 50% 75%;
z-index:-1;
}
我正在使用VH单位.我怀疑这可能是问题所在？
可能还有其他一些潜在的问题,但我不确定如何调试我的问题,因为模拟器上的一切看起来都很好,但设备本身却没有.我现在花了大约三个小时,非常感谢一些帮助.
谢谢！
解决方法
你可以在
caniuse.com阅读
Partial support in iOS7 is due to buggy behavior of the “vh” unit.
已知的问题：
- Chrome does not support viewport units for border widths,column
gaps,transform values,Box shadows or in calc() until version 34.- iOS Safari (both 6 and 7) does not support viewport units for border widths,column gaps,Box shadows or in calc().
- iOS 7 Safari sets viewport unit values to 0 if the page has been left and is returned to after 60 seconds.
- Internet Explorer 9 in print-mode interprets vh as pages. 30vh = 30 pages
- iOS 7 Safari recalculates widths set in vh as vw,and heights set in vw as vh,when orientation changes.
有关越野车行为的更多信息
http://blog.rodneyrehm.de/archives/34-iOS7-Mobile-Safari-And-Viewport-Units.html
和一个polyfill https://github.com/rodneyrehm/viewport-units-buggyfill
