h5苹果x适配,苹果移动端网页适配规范
我们先来看看iPhone X的型号
在上图中，这两个区域被添加到Iphonex模型的头部和底部，因此我们需要调整这些模型，以便于显示我们的webapp。
h5做的移动页面，常见的布局是头部和躯干底部三栏，头部和顶部固定，躯干内部的内容可以滚动。暂定布局如下：
class= page header/header main/main footer/footer/div但是如果不使用IphoneX模型新增的css属性，可以直接使用position:fixed；用常规写法如top: 0，头部的导航条会被状态栏挡住(显示电源信号等。)的手机，而底部的导航栏会被IphoneX的呼吸灯(图中手机底部的白条)遮挡，给用户的操作和体验带来麻烦。目前针对这类问题，根据自己的项目，我整理了几种解决方案。
我用的是vue框架。在index.html页面上，我们需要添加
meta= viewport content= width=device-width，viewport-fit=cover 然后，在public app.vue页面上，我们每个组件的显示在这里都被router-view所取代，所以你可以在这里处理公共的标题栏。具体布局如下：
template div id= app div class= placeholder _ top :style= { position:fix positiona？absolute : fixed } /div router-view class= router view /router-view/div/template在上面的布局中，我们为类为placeholder_top的div编写了以下内容：placeholder_top {位置：固定；top:0；左：0；宽度：10雷姆；背景色：# 303030；高度：不变(安全区域嵌入顶部)；height:env(safe-area-inset-top)；z指数：999；}这样我们就不用在后续的，单独的组件中处理顶栏的问题了。那么下面，我们可以处理一下上面提到的表头问题。一般我们大部分的头都是封装成公共组件的，所以在这里，由于我们在app.vue页面中插入的元素的影响，我们的头的css编写也需要稍作改动。标题组件的页面布局如下：
template header div class= title :style= { position:fix position？absolute:fixed} 导航内容/div div class= placeholder /div/header/template页面的css为：
页眉{ background-color:# 303030；标题{位置：固定；top:0；top:常量(安全区域-插入-顶部)；top: env(安全区域嵌入顶部)；左：0；高度：88pxz指数：999；} .placeholder { height:88px；宽度：10雷姆；}}}这样写的话，这个头部导航栏会位于手机状态栏下方，不会影响Windows，可以兼容Android和ios机型(这种兼容问题还涉及到ios的系统问题，但本文还没有涉及到)
我们来看看主区域的处理。因为上面的header组件已经过处理，所以主要布局如下：
main { padding-top:constant(safe-area-inset-top)；padding-top:env(safe-area-inset-top)；padding-bottom: calc(88px常量(safe-area-inset-bottom))；padding-bottom:calc(88px env(safe-area-inset-bottom))；Ps:这里，在当前页面没有底部导航栏的情况下，使用以下两行。
padding-bottom:常量(安全区域-插入-底部)；padding-bottom:env(safe-area-inset-bottom)；}，主版面准备好了，直接写内容就行了，
然后看底部的页脚布局。
template footer div class= foot :style= { position:fix position？absolute : fixed } /div/footer/template底层内容的css如下：
页脚{位置：固定；底部：0；左：0；宽度：10雷姆；height: calc(88px常量(安全区域-插入-底部))；height: calc(88px env(安全区域-插入-底部))；背景色：# 303030；脚{位置：绝对；top:0；左：0；宽度：10雷姆；高度：88px}}这样写，底部导航脚里面的内容就不会被手机自带的呼吸灯遮挡了。
所以综上所述，我们在这次webapp改编中可能需要采用以下css编写方法：
位置：固定；top:常量(安全区域-插入-顶部)；top: env(安全区域嵌入顶部)；bottom:常量(安全区域-插入-底部)；bottom: env(安全区域嵌入底部)；top: calc(1rem常量(safe-area-inset-top))；top:calc(1 rem env(safe-area-inset-top))；bottom: calc(1rem常量(safe-area-inset-bottom))；bottom:calc(1 rem env(safe-area-inset-bottom))；Ps:在上面的写法中，是这样写的：style={position:fixposition？Absolute:fixed} ，这是为了解决用户点击输入框弹出软键盘时，此类固定元素定位不准确的问题。有兴趣的可以研究一下，本文暂不讨论。
这里可以根据实际需要采用不同的写法。总的布局逻辑建议不要偏离太多。这样写是为了统一处理，方便维护。另外，如果有真机测试，发现布局兼容导致的风格问题，可以采用真机调试的方法，用pc浏览器调试webapp，查看元素，基本可以解决大部分风格问题。关于真机调试，下次再写。
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。