iPhoneX 适配H5页面的解决方案


由于在iPhonex在状态栏增加了24px的高度,对于通栏banner规范的内容区域会有遮挡情况。

解决方案:在页面通栏banner顶部增加一层高度44px的黑色适配层,整个页面往下挪44px,这种做法虽然不符合苹果设计规范,可以先以这种方式处理,后续再优化banner设计展现。

对于底部footer可以增加34px的适配层,将操作栏上移34px,颜色可以自定义。

如果不这样设置 可以使用苹果官方提供的meta标签

viewport-fit:有三个值contain:可视窗口完全包含网页内容;cover:网页内容完全覆盖可视窗口;auto:同contain;

通过给页面设置viewport-fit=cover,可以将页面的布局延伸到页面顶部和底部

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM