本文介绍了如何处理iPhone X的刘海屏对Web前端页面的影响，包括理解安全区域、使用viewport-fit属性以及CSS3的env和var变量。通过示例代码和测试图，展示了适配过程，确保内容在不同iPhone型号上正常显示。
一、两个概念
iPhone X和IOS 11的发布，不在许多技术方面造成了一定的冲击，前端也不可以避免地也受到影响，因为iPhone X刘海的影响，在编写前端页面的时候要做一些处理，下面先提出一些新的概念。
安全区域
因为刘海的关系，所有的展示都会放在一个叫做safe-area的区域，如下图(1-1)，主要是为了防止显示的内容被刘海传感器(house sensor)，圆角边框(rounded corners)所遮挡，这样对用户来说是不友好的，但是如果全部内容被放置在默认的安全区域，显示的内容就会被压缩，这个时候需要做一些处理，既然页面能够正常显示，又能够不被安全区域遮挡。
CSS3新特性viewport-fit
在w3c.org官方给出的关于圆形展示(Round display)的标准中， 提到了viewport-fit这一属性，这个属性表明了对于某些屏幕并不是矩形形状的设备的时候浏览器该如果进行显示。传送门:viewport-fit官方参考文档
CSS3新特性env以及var预定义变量。
在定义以后viewport-fix以后， 浏览器会自动生成四个padding变量，即用来将页面向内挤压到可以正常显示的位置。这个时候需要用到env或者constant来将变量转换成CSS属性值并且赋值给属性。ps:env好像还在开发中，好像只支持IOS 11.2及以上。目前比较稳妥的方法就是constant和env一起使用。传送门:var预定义变量官方参考文档
二、环境要求
软件环境要求: 能跑xcode 9.1的机器一台(我用的Mac mini,主要是用来开启iPhone X模拟器，穷~~~)
一个IDE(sublime或者vscode随意)
一个本地调试服务器(用npm安装一个http-server就行)
当然还有最重要的，就是你~~~~
三、开始动手
- 在meta中添加viewport-fit=cover(告诉浏览器要讲整个页面渲染到浏览器中，不管设备是圆角与否，这个时候会造成页面的元素被圆角遮挡)，如下图3-1。
2. 为了处理这些显示的问题，我们需要使用到env，constant还有预定义变量safe-area-inset-top,safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left。全部使用的这些方法或者变量都是在Safari中全部定义好的，我们就正常使用就行。但是别忘记了还要做一个向下兼容。
下面附上完整的代码以及一些测试图。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>iphone X 屏幕以及其他iphone屏幕适配</title>
<style>
/* 一、样式基本初始化 */
* {
margin: 0;
padding: 0;
}
最低0.47元/天 解锁文章
257
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
