H5移动终端适用于IphoneX和其他型号

让我们看一下iPhone X的外观

在上图中calc 移动端兼容性，Iphonex模型在头部和底部添加了这两个区域，因此我们需要对此模型进行一些修改以促进我们的Web应用程序的显示.

h5制作的移动页面，常见的布局是头部+躯干+底部三栏模式，头部和顶部固定定位，躯干中的内容可以滚动，暂定布局如下:

 <div class="page">
    <header></header>
    <main></main>
    <footer></footer>
  </div>

但是，如果您不使用IphoneX模型的new css属性，请直接使用常规的书写方法，例如position: fixed;顶部: 0，手机的状态栏将显示头部的导航栏（显示电源信号等）. 在阻塞的情况下，底部的导航栏被呼吸灯阻塞（图中手机底部的白条）是IphoneX随附的，这给用户的操作和体验带来了麻烦. 项目，整理出几种解决方案

我使用vue框架. 在index.html页面上，我们需要添加

<meta name="viewport" content="width=device-width,viewport-fit=cover">

然后，在公共app.vue页面上，此处的每个组件的显示都被router-view替换，因此您可以在此处处理公共标题栏. 具体布局如下:

<template>
<div id="app">
<div class="placeholder_top" :style="{position:fixpositiona?'absolute':'fixed'}"></div>
<router-view  class="routerview"></router-view>
</div>
</template>

在上面的布局中，我们为类placeholder_top的div编写了以下代码:

.placeholder_top {
  position: fixed;
  top: 0;
  left: 0;
  width: 10rem;
  background-color: #303030;
  height: constant(safe-area-inset-top);
  height: env(safe-area-inset-top);
  z-index: 999;
}

在这种情况下，我们将跟进一个单独的组件，因此我们不必处理顶部栏的问题. 下面calc 移动端兼容性，我们可以解决上面提到的头部问题. 通常，大多数磁头都封装在公共组件中. ，因此在这里，由于我们插入到app.vue页面中的元素的影响，我们头部的css书写也需要稍作修改. 头部组件页面布局如下:

<template>
<header>
    <div class="title" :style="{position:fixposition?'absolute':'fixed'}">
    导航内容
    </div>
    <div class="placeholder"></div>
    </header>
</template>

页面的CSS是:

header{
background-color: #303030;
    .title{
    position: fixed;
    top:0;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
    left: 0;
    height：88px;
    z-index: 999;
    }
    .placeholder{
    height: 88px;
    width: 10rem;
    }
}

这样写，头部导航栏将位于手机的状态栏下方，不会影响窗口，并且可以与Android和ios模型兼容（此类兼容性问题也涉及ios系统问题，但这文章尚未涵盖）

让我们看一下主要区域的处理. 由于上面的标头组件已经过处理，因此主要布局如下:

  main {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: calc(88px + constant(safe-area-inset-bottom));
padding-bottom: calc(88px + env(safe-area-inset-bottom));
ps:这里说明一下，下面的两行，是用在当前页面没有底部导航栏的情况
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

}，

main内部的布局已准备就绪，只需直接编写内容，

然后查看底部的页脚布局

<template>
<footer>
    <div class="foot" :style="{position:fixposition?'absolute':'fixed'}">
    底部内容
    </div>
</footer>
</template>

底部内容的css如下:

footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 10rem;
    height: calc(88px + constant(safe-area-inset-bottom));
    height: calc(88px + env(safe-area-inset-bottom));
    background-color: #303030;
    .foot{
    position: absolute;
    top:0;
    left: 0;
    width: 10rem;
    height: 88px;
    }
}

这样写，底部导航脚下的内容不会被手机随附的呼吸光所阻挡

所以可以总结一下，我们在这种webapp适配中，可能需要采用的css写法如下：
    position: fixed;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    top: calc(1rem + constant(safe-area-inset-top));
    top: calc(1rem + env(safe-area-inset-top));
    bottom: calc(1rem + constant(safe-area-inset-bottom));
    bottom: calc(1rem + env(safe-area-inset-bottom));

ps:在上面的写法中，有写到:style="{position:fixposition?'absolute':'fixed'}"，这个是为了解决用户点击输入框，弹出软键盘时，这类固定元素的定位不准的问题，感兴趣的可以研究下，本文暂不讨论

这里可以根据实际需求来采用不同的写法，大体布局逻辑建议不要偏差太大，这样写是为了统一处理，方便维护，另外如果有真机测试，发现布局兼容导致的样式问题，可以采用真机调试方法，用pc端浏览器调试webapp，审查元素，那样基本能解决大部分样式问题，关于真机调试，下回写

文章来源：segmentfault，作者：吴一周。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：william.shi#ucloud.cn（邮箱中#请改为@）进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。

背景-系统设置-扩展变量-移动广告空间-内容主体底部

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-187142-1.html