H5页面适配 iPhoneX

过去，我们拿到的手机是方方正正的矩形，所以整个屏幕都可以看做是安全区域 Safe Area，而如今由于 iPhone X 及以上机型，屏幕上的“刘海”以及屏幕四周采用圆角的设计，对于开发者和设计师来说，这个刘海带给他们的是更多的麻烦。比如黄颜色的部分表示网页遮挡了，用户不可见的地方。

iPhoneX 及以上机型取消了物理按键，改成底部小黑条，对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。

适配之前需要了解的几个新知识

安全区域

安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角、齐刘海、小黑条影响，如下图蓝色区域：

也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。

viewport-fit

iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：

contain: 可视窗口完全包含网页内容（左图）

cover：网页内容完全覆盖可视窗口（右图）

auto：默认值，跟 contain 表现一致

env 函数 iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

safe-area-inset-left：安全区域距离左边边界距离

safe-area-inset-right：安全区域距离右边边界距离

safe-area-inset-top：安全区域距离顶部边界距离

safe-area-inset-bottom：安全区域距离底部边界距离

这里我们只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度（横竖屏时值不一样）。

我们设置 viewport-fit:contain，也就是默认的时候时；设置 safe-area-inset-left, safe-area-inset-right, safe-area-inset-top 和 safe-area-inset-bottom 等参数时不起作用的。

如何适配

了解了以上所说的几个知识点，接下来我们适配的思路就很清晰了。

第一步：设置网页在可视窗口的布局方式

新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：

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

前面也有提到过，只有设置了 viewport-fit=cover，才能使用 constant 函数。

第二步：页面主体内容限定在安全区域内

这一步根据实际页面场景选择，如果不设置这个值，可能存在小黑条遮挡页面最底部内容的情况。

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

第三步：fixed 元素的适配

如果 fixed 完全吸底元素（bottom = 0），可以通过加内边距 padding 扩展高度：

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

H5页面适配 iPhoneX相关推荐

H5页面适配 iPhoneX全面屏手机
要兼容IphoneX,尤其是使用 position: fixed;bottom: 0; 样式时,要确保底部栏处于安全区域 H5开发适配: 参考苹果开发者参考文档 ios 开发适配: 参考: http ...
H5页面适配iphoneX底部小黑条遮盖内容
iphoneX取消了物理按键,改为底部小黑条,这也在页面开发的过程中,会出现底部内容被小黑条遮盖的现象,影响页面效果, 我们可以这也解决 1:增加viewport属性 viewport-fit=&qu ...
h5页面适配iPhone X的方法
项目接近尾声,测试时突然想起还有iphoneX需要适配,虽然页面都是自适应,但是由于iPhone X的特殊性,还是需要特殊对待.因为这个h5项目嵌入在原生项目中,适配就会有有种方式:1.在原生中用原生 ...
关于H5页面在iPhoneX刘海屏适配(转）
关于H5页面在iPhoneX适配 1. iPhoneX的介绍屏幕尺寸我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸转化成我们熟知的像素尺寸: △ 每个机型的多 ...
H5网页适配 iPhoneX，就是这么简单
iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可( ...
【原】让H5页面适配移动设备全家 - 设计师篇 - PPT
上一篇文章<pageResponse - 让H5适配移动设备全家>中分享了一个小插件让一套H5页面适配几乎所有移动设备,得到了一些同学的推荐和认可,这里感谢大家的支持. 在此之前也在部门前 ...
教你如何用 lib-flexible 实现移动端H5页面适配
前话好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实 ...
移动端 H5页面适配
一.基础概念在了解如何做H5页面适配前,大家都应该把移动端涉及的一些概念搞明白,比如:dpr 是什么意思? 移动端H5解惑-概念术语(一) 二.为什么要做页面适配 2.1 PC端为什么要解决浏览器兼 ...
H5｜小程序｜RN页面适配iphoneX【异形屏幕｜底部安全区域】
需求场景: H5页面有一个吸底的按钮,但是异形屏幕[iPhonex等],按钮一大半会被系统的小黑条挡住.需要适配在异形屏幕下,完整展示按钮,不被遮挡. 查了一些资料,发现为了应对刘海屏幕,苹果也给出了 ...

H5页面适配 iPhoneX

如何适配

H5页面适配 iPhoneX相关推荐

最新文章

热门文章