这篇文章主要介绍“html5简单iphoneX刘海屏适配的方法”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“html5简单iphoneX刘海屏适配的方法”文章能帮助大家解决问题。

如何适配？

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

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

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

contain: 可视窗口完全包含网页内容

cover：网页内容完全覆盖可视窗口

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

注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。
第二步，页面主体内容限定在安全区域内

.post{padding:12px;padding-left:env(safe-area-inset-left);padding-left:const(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-right:const(safe-area-inset-right);}

constant 函数

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

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

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

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

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

注意：部分浏览器已经不支持constant函数，用env函数替代

上面设置了padding为12像素，如果旋转方向后：

第三步，使用min()和max()方法

@supports(padding:max(0px)){.post{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));}}

fixed元素固定问题

如果页面title是前端实现的，且固定在顶部，就会出现被遮挡的情况，这时候可以设置top值为安全距离值，比如：

.header{top:env(safe-area-inset-top);top:const(safe-area-inset-top);}

关于“html5简单iphoneX刘海屏适配的方法”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。