【移动端适配一】移动端Web页面的ios安全区适配

背景

从苹果手机 iphoneX 发布之后，前端人员在开发移动端Web页面时，得多注意一个对 IOS 所谓安全区域范围的适配。这其实说白了就是 iphoneX 之后的苹果手机，在页面上，你需要对顶部和底部多预留一点空间。

造成这个问题的主要原因就是苹果手机在屏幕上出现了所谓的刘海屏，而且更是在屏幕下方加了一条小黑条。

我们上下预留的占位空间就是为了防止我们页面的内容被这些元素遮挡，但是如果你做的页面只是放在一些浏览器（微信内置浏览器）内传播，一般我们也不需要处理顶部刘海问题，顶部一般就是原生的标题栏了，不用我们管。但如果你的页面会被内嵌在 APP 展示且 APP 是全屏展示的，那么这个问题还是得处理一下。

下面我们分别介绍一下通过 CSS 和 JS 怎么去处理，根据场景你可以自行选择。

CSS

在 iOS11 新增特性中，Webkit 包含了两个新的函数 env() 和 constant()，以及四个预定义的常量：

safe-area-inset-top：安全区域距离顶部边界距离，状态栏+导航栏大约为88px。
safe-area-inset-left：安全区域距离左边边界距离，竖屏时为0。
safe-area-inset-right：安全区域距离右边边界距离，竖屏时为0。
safe-area-inset-bottom：安全区域距离底部边界距离，大约高度为34px。

我们可以这样子使用它们：

body{/* 兼容 iOS < 11.2 */padding-top: constant(safe-area-inset-top);padding-left: constant(safe-area-inset-left);padding-right: constant(safe-area-inset-right);padding-bottom: constant(safe-area-inset-bottom);/* 兼容 iOS >= 11.2 */padding-top: env(safe-area-inset-top);padding-left: env(safe-area-inset-left);padding-right: env(safe-area-inset-right);padding-bottom: env(safe-area-inset-bottom);
}

当然，你也可以在某个固定（fixed）在底部的元素上单独使用：

div{padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
}

JS

当然，有时候单纯的 CSS 方式并不能满足实际的需求场景，那么我们就需要判断出那些 IOS 的手机屏幕是需要特殊处理的。

而 iphoneX 之后的苹果手机 Series 参数如下：

机型倍率分辨率 pt

iPhone X 3 2436 × 1125 812 × 375
iPhone XS 3 2436 × 1125 812 × 375
iPhone XS Max 3 2688 × 1242 896 × 414
iPhone XR 2 1792 × 828 896 × 414

根据这些参数我们把苹果手机的长屏，也就是拿屏幕的高度用来当成判断条件：

/*** 判断IOS异形屏* @returns*/
export function isIphoneX(){if (typeof window !== 'undefined' && window) {var faultTolerantVal = 10; // 容错值return /iphone/gi.test(window.navigator.userAgent) && (window.screen.height + faultTolerantVal) >= 812;}return false;
};

【移动端适配一】移动端Web页面的ios安全区适配相关推荐

APL在Web应用系列 --- 例子1: 在Web页面的javascript中调用 apl脚本
这个专题专门讲 APL平台在 Web中的应用. APL平台在Web中应用范围包括: 1. 在Web服务端应用: APL平台中, aplHttpServer.exe( APL中本地的Web服务器 ...
web页面的js中检测浏览器是否加载flash插件，用来确保视频播放器和flash上传的正常运行
web页面的js中检测浏览器是否加载flash插件,用来确保视频播放器和flash上传的正常运行 <script type="text/javascript" languag ...
jmeter验证WEB页面的href链接请求
1. 第一步: 创建Samper_HTTP请求,打开测试页面 2. 第二步: 创建后置处理器_正则表达式(也有其他方式,这里仅介绍正则) 如图 3. 第三步创建逻辑控制器_ForEach控制器,配置 ...
内网IP变更后，内网致信客户端不能正常打开WEB页面的OA
致远OA,致信客户端,在内网IP修改变更后,后台的致信配置也要进行修改.首先,停止OA的业务,为确保完全停止,重启服务器.登录system系统管理员账户.找到功能应用设置-->致信管理,如下图. ...
IOS 屏幕适配（一）理论篇
IOS 屏幕适配(一)理论篇 1. IOS 屏幕适配基本概念 1.1 IOS 设备的尺寸和分辨率 1.1.1 分辨率相关概念 1.1.2 IOS 各个设备对应的分辨率 1.2 设计和开发之间的多屏适配 ...
IOS 屏幕适配理论篇
@[TOC](IOS 屏幕适配(一)理论篇) 1. IOS 屏幕适配基本概念 1.1 IOS 设备的尺寸和分辨率 1.1.1 分辨率相关概念点(Points): 是iOS开发中引入的抽象单位,称作点 ...
【适配】521- 移动端开发各种兼容适配问题（屏幕、图像、字体与布局等）
来源 | https://www.cnblogs.com/coco1s/p/11463599.html 本文是内部的一次分享沉淀,偏向基础但是涉及了一些有意思的细节,文笔有限,才疏学浅,文中若有不正之 ...
【前端】页面适配？移动端适配屏幕的各种解决方案！
前言由于移动端的特殊性,屏幕的尺寸碎片化严重,要想很好的适配不同的尺寸的设备,需要我们前端开发相比PC端要做一些基层的适配方案. 1. 常见的适配方案百分比+固定高度布局方案固定屏幕为理想视口宽 ...
手游页游和端游的服务端的架构与区别
手游页游和端游的服务端本质上没区别,区别的是游戏类型. 类型1:卡牌.跑酷等弱交互服务端卡牌跑酷类因为交互弱,玩家和玩家之间不需要实时面对面PK,打一下对方的离线数据,计算下排行榜,买卖下道具即可, ...

【移动端适配一】移动端Web页面的ios安全区适配

背景

CSS

JS

【移动端适配一】移动端Web页面的ios安全区适配相关推荐

最新文章

热门文章