H5 适配 iPhone X

1，设置网页在可视窗口的布局方式

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

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

只有设置了 viewport-fit=cover，才能使用 env 函数。

contain: 可视窗口完全包含网页内容（左图）
cover：网页内容完全覆盖可视窗口（右图）
auto：默认值，跟 contain 表现一致

2，页面主体内容限定在安全区域内

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

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

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

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离

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

3，fixed 元素的适配

可以通过加内边距 padding 扩展高度：

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

或者通过计算函数 calc 覆盖原来高度：

{height: calc(60px(假设值) + env(safe-area-inset-bottom));
}

或者，你也可以通过计算函数 calc 覆盖原来 bottom 值：

{bottom: calc(50px(假设值) + env(safe-area-inset-bottom));
}

4，别忘了使用 @supports

一般我们只希望 iPhoneX 才需要新增适配样式，我们可以配合 @supports 这样编写样式：

@supports (bottom: env(safe-area-inset-bottom)) {div {margin-bottom: env(safe-area-inset-bottom);}
}

原文：https://blog.csdn.net/dx18520548758/article/details/80010358

H5 适配 iPhone X相关推荐

动手试试！手把手教你如何适配 iPhone X
点击上方"iOS开发",选择"置顶公众号" 关键时刻,第一时间送达! 前言基于很多文章都只是翻译了官方的原文,并没有加入自己的想法和见解,所以我决定自己试着适 ...
uniapp开发微信小程序/h5完整流程，含vant/uview(h5适配vw)
theme: smartblue highlight: dark 创建项目创建后的项目此处插入一个坑亦可以使用uniapp vue-cli 创建项目 vue create -p dcloudio ...
H5方面（H5适配手机屏幕等）
一个html页,其文本包含三个方面的信息,逻辑,内容,样式.其中逻辑部分决定页面和用户交互的行为,样式部分决定用户界面的视觉表现,内容部分是结构化的文本信息.对于一个以内容为主的页面(区别于富交互应用 ...
pageResponse - 让H5适配移动设备全家(移动端适配)1
pageResponse - 让H5适配移动设备全家(移动端适配)1 转载于:https://www.cnblogs.com/lichaoqing/p/5994131.html
pageResponse - 让H5适配移动设备全家(移动端适配)
pageResponse - 让H5适配移动设备全家(移动端适配) 转载于:https://www.cnblogs.com/lichaoqing/p/5994114.html
全球开发者各出奇招：我们想这样适配iPhone X
https://blog.csdn.net/fzhlee/article/details/78037474 (原标题:面对iPhone X刘海现实,看看全世界的开发者怎么适配) 原创curator 北 ...
iOS APP适配iPhone X全屏
要让APP在iPhone X上变成全面屏显示(占满整个屏幕),而不是上下有没用的黑条,其实很容易,只需要: 在LaunchImage 中添加一个和 iPhone X 相关的启动图片. 即一张尺寸:11 ...
UICollectionView 适配 iPhone 7 Plus
UICollectionView 适配 iPhone 7 Plus 原文地址:http://www.cnblogs.com/silence-cnblogs/p/6617066.html 介绍UICol ...
iOS开发适配iPhone X 齐刘海处理,代码适配iPhoneX
我的简书新地址,欢迎点击查看哦~ 今天手头工作完事了,然后升级了Xcode9,变化很大啊,先说大家一直关心的适配齐刘海吧. 这个东西好像出来之后我QQ群里面iOS开发的很多人都炸了.确实这个齐刘海对 ...