iphoneX 前端两种适配方案

方案一:
为适应于iphoneX的齐刘海,ios11的WebView Viewport对于顶部做了调整。
iphoneX

Viewport
手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页布局),用户可以通过平移和缩放来看网页的不同部分。移动版Safari浏览器最新引进了viewport这个meta标签,让网页开发者来控制viewport的大小和缩放,其他手机浏览器也基本支持。

ios11中viewport-fit三个取值:

contain:视口完全包含网页内容。头部位置固定元素将被包含在ios11的安全区域内。
cover:网页内容应完全覆盖视口。头部位置固定元素将被固定到视口,这恢复了ios10上的行为。
auto:默认值,行为相同contain。
如:


CSS常量
对于iphoneX头部遮挡问题,苹果公司增加了一种方法来将安全区域布局指南暴露给CSS。他们添加了一个类似于CSS变量的概念,称为CSS常量。这些像系统设置的CSS变量,不能被覆盖,可以通过CSS中的constant()函数来访问,该函数已被提交给CSS工作组进行标准化。

4个布局常数:

constant(safe-area-inset-top):从视口顶部的安全区域插入量(以CSS像素为单位)。
constant(safe-area-inset-bottom):从视口底部的安全区域插入量(以CSS像素为单位)。
constant(safe-area-inset-left):从视口左侧的安全区域插入量(以CSS像素为单位)。
constant(safe-area-inset-right):从视口右侧的安全区域插入量(以CSS像素为单位)。
如:

.header{
padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
}

方案二:

最直接的方案上下使用固定定位,上面用黑色吧44px高度,固定住,下面呢用34px固定住。内容展示方面body也设置一下padding。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iphonex</title>
    <meta content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes" name="viewport">
    <style>
        body{padding-top:44px;padding-bottom: 34px;}
        .top{position: fixed;width:100%;height:44px;background-color: #000;top:0;left: 0;}
        .bottom{position: fixed;width:100%;height:34px;bottom:0;left: 0;}
    </style>
</head>
<body>
<div class="top"></div>
<div class="content">sfsd</div>
<div class="bottom"></div>
</body>
</html>

进化方案上面的方式很明显,适合初始开发那么已经做了开发的现有项目应该怎么快速适配呢,根据上面的思路我写了个比较通用的css,只需要将css引入,给body增加这个class就可以了,无需对现有项目进行修改。css中根据分辨率做了过滤,所以不会影响现有的其他设备适配。iphonex.css

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.iphonex{padding-top:44px;padding-bottom: 34px;}
.iphonex:before{content:”;display:block;position: fixed;width:100%;height:44px;background-color: #000;top:0;left: 0;z-index:9999;}
.iphonex:after{content:”;display:block;position: fixed;width:100%;height:34px;bottom:0;left: 0;z-index:9999;}
}
html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iphonex</title>
    <meta content="width=device-width,maximum-scale=1.0,initial-scale=1.0,minimum-scale=1.0,user-scalable=yes" name="viewport">
    <link rel="stylesheet" href="iphonex.css">

</head>
<body class="iphonex">
    你自己的页面内容
</body>
</html>

注意:如果你页面里面已经存在定位,可能需要自己调整一下,原有元素的定位。

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页