兼容iphone x刘海的正确姿势

程序员--青青

已于 2024-01-17 23:05:14 修改

阅读量985

点赞数 19

文章标签： iphone ios

于 2023-12-28 10:00:00 首次发布

本文链接：https://blog.csdn.net/ZL_1618/article/details/135237570

版权

本文讲述了在苹果新品发布后，前端开发者如何适应不同尺寸iPhone的刘海和下巴设计，介绍了viewport-fit和safe-area属性的使用，以及如何通过CSS调整布局以兼容各种安全区域。

摘要由CSDN通过智能技术生成

9月13日凌晨终于等来了万众瞩目的苹果新品发布会，相信很多小伙伴们都期待新 iphone 可以剪掉刘海胡子，但万万没想到的是等来了三款不同的尺寸的 iphone x ，我的天，等了这么久你给我看这个？码农慌得一批满地找新 iphone 的逻辑像素，然后想着怎么兼容这刘海和胡子。

以往的做法

其实对于 web 前端来说，刘海在绝大多数的场景下是可以不用处理的，因为 safari 或客户端（微信，手Q等）的 statusBar 已经替我们抹平了顶部刘海，我们只需要关心底部的那条黑色的胡子，因为如果页面底部有按钮的话，就会被胡子给挡住，以往我们兼容过 iphone x 的下巴，但现在回想起来不是正确的做法。我们之前是这么处理的：首先在 <html> 中加入对应的 className：has-bottombar

<html class="has-bottombar"><head></head><body></body>
</html>

再配上对应的 css:

@media only screen and (-webkit-device-pixel-ratio: 3) and (device-height: 812px) and (device-width: 375px) {.has-bottombar {height: 100%;-moz-box-sizing: border-box;box-sizing: border-box;padding-bottom: 34px;}.has-bottombar:after {content: '';z-index: 9999;position: fixed;left: 0;bottom: 0;width: 100%;height: 34px;background: #fff;}
}

这里的处理方法是使用了媒体查询 media query 按照 iphone x 的尺寸（375px * 812px）做特殊处理，主要做两件事情：1、给 html 底部预留 34px 的间距，让页面里面的内容距底部保持 34px 的间距，从而避开了胡子的遮挡。2、创建一个 after 伪类通过设置 position: fixed 定位到页面底部，并设置成白色，这一处理主要是遮挡住页面背景色。效果如下图：

这里有个很明显的问题：页面左边的文字被刘海遮挡。

这些处理如果在9月13日之前是问题不大的，但在 9月13日之后前端开发的同学头就大了，因为新的三款 iphone 尺寸都不一样（逻辑像素 xr: 375 * 812; xs: 414 * 896; xs max: 414 * 896;）于是，开始奔命于修改 media query。。。如果明年又多几个尺寸那就会是没完没了的改改改。

正确的姿势

在 ios 11 中我们可以使用 viewport-fit=cover + safe-area-inset-*。那么是不是 ios11 以下就用不了这些了呢？是的，但你见过 iphone x+ 有 ios 11以下的吗？所以我们可以愉快的搞下去。

开始之前我们先了解什么是 safe area，简单的来说就是除了刘海和胡子以外的区域为安全区域：

关于 viewport-fit

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

如何决定 viewport-fit 值？我们要考虑一些问题：1、在非矩形显示器上设置 viewport 边界时，Viewport边界框(Viewport Bounding Box)的面积大于显示区域，导致了剪切区域2、如果要保证Web页面的任何部分都没有隐藏，不想让Web页面在可读性上变得很小，那么最好将viewport-fit设置为cover，并在考虑剪切部分时实显示页面。3、还有另一个考虑是，当我们设置 viewport-fit:contain，也就是默认的时候时，设置 safe-area-inset-* 等 css 属性时不起作用的。点击这里了解更多关于 viewport-fit

关于 safe-area-inset-*

各种 iphone x 都是不规则形状，我们如何控制页面元素到安全区域呢？apple 把安全区域的位置通过 css 属性提供给了开发者，它们可以通过CSS的constant( )函数来完成：

constant(safe-area-inset-top)：在Viewport顶部的安全区域内设置量（CSS像素）constant(safe-area-inset-bottom)：在Viewport底部的安全区域内设置量（CSS像素）constant(safe-area-inset-left)：在Viewport左边的安全区域内设置量（CSS像素）constant(safe-area-inset-right)：在Viewport右边的安全区域内设置量（CSS像素）

简单来说我们可以通过 constant( ) 可以获取到非安全边距，再结合 padding 或 margin 来控制页面元素避开非安全区域。 Webkit在iOS11中新增CSS Functions: env( )替代constant( )，文档中推荐使用env( )，而 constant( ) 从Safari Techology Preview 41 和iOS11.2 Beta开始会被弃用。在不支持env( )的浏览器中，会自动忽略这一样式规则，不影响网页正常的渲染。为了达到最大兼容目的，我们可以 constant( ) 和 env( ) 同时使用。

.yourFooterClass {padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
}

本文为了简洁只写 env( )。

实践一波

一、设置网页在可视区域的布局方式

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

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

二、让主体内容控制在安全区域内

假设我们的底部按钮高度是50px：

body {padding-top: env(safe-area-inset-top);padding-right: env(safe-area-inset-right);padding-bottom: 50px;/* 兼容不支持 env( ) 的设备*/padding-bottom: calc(env(safe-area-inset-bottom) + 50px); /* 在 iphone x + 中本句才会生效 */padding-left: env(safe-area-inset-left);
}

有两个关键点：1、写在前面的 padding-bottom: 50px 为了兼容没有底部胡子的设备，让主体内容偏移出底部按钮的高度，避免按钮遮挡内容。2、padding-bottom: calc(env(safe-area-inset-bottom) + 50px); 计算 底部非安全区域距离 与 底部按钮高度 之和来做为 padding-bottom 值，如果设备支持 env，那么 calc 会计算出一个合法的值，本句的优先级则最高，会覆盖前面的 padding-bottom: 50px。否则 calc 会计算出一个不合法的值，则本句声明不会生效。这样在不支持 env 设备中也可以达到兼容的目的。

目前到这，在横屏场景下左侧的内容就不会被刘海遮挡住了：

三、底部按钮的处理

首先给底部按钮一个外层容器 .btn-container ，设置样式时其中有几点比较关键：1、设置padding-bottom: env(safe-area-inset-bottom);增加一个 padding 值，让底部向外扩展一个非安全区域的距离。2、设置background: #FFF 让整个 .btn-container 背景为白色（包括刚新增的 padding-bottom 的区域）这样就可以遮挡住了底部内容。3、设置 box-sizing: content-box; ，因为在通常情况下 css 在 reset 阶段一般都设置了 * {box-sizing: border-box;} 这样一来设置 padding 就不能向外扩展距离了，所以在这里我们要把他改回 content-box。

.btn-container {box-sizing: content-box;height: 50px;line-height: 50px;color: #fff;position: fixed;bottom: 0;left: 0;right: 0;text-align: center;background: #FFF;padding-bottom: env(safe-area-inset-bottom);
}

.btn {width: 100%;height: 50px;line-height: 50px;background-color: #00c340;border: none;
}

看看效果：

最后

如果兼容刘海和胡子需要满地找逻辑像素，满地找新 iphone，很可能是没有掌握正确的姿势。另外，发现在横屏场景下有一个比较有趣的效果，大家可以了解一下，但在实际业务中应该不需要做得这么花哨：<img src=“https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/11/12/167079e42e278e6c~tplv-t2oaga2asx-zoom-in-crop-mark:4536:0:0:0.image)[借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海](https://link.juejin.cn/?target=https%3A%2F%2Fwww.zhangxinxu.com%2Fwordpress%2F2017%2F09%2Fcss-shapes-outside-iphone-x-head%2F “https://www.zhangxinxu.com/wordpress/2017/09/css-shapes-outside-iphone-x-head/”” style=“margin: auto” />接下来我将给各位同学划分一张学习计划表！

学习计划

那么问题又来了，作为萌新小白，我应该先学什么，再学什么？
既然你都问的这么直白了，我就告诉你，零基础应该从什么开始学起：

阶段一：初级网络安全工程师

接下来我将给大家安排一个为期1个月的网络安全初级计划，当你学完后，你基本可以从事一份网络安全相关的工作，比如渗透测试、Web渗透、安全服务、安全分析等岗位；其中，如果你等保模块学的好，还可以从事等保工程师。

综合薪资区间6k~15k

1、网络安全理论知识（2天）
①了解行业相关背景，前景，确定发展方向。
②学习网络安全相关法律法规。
③网络安全运营的概念。
④等保简介、等保规定、流程和规范。（非常重要）

2、渗透测试基础（1周）
①渗透测试的流程、分类、标准
②信息收集技术：主动/被动信息搜集、Nmap工具、Google Hacking
③漏洞扫描、漏洞利用、原理，利用方法、工具（MSF）、绕过IDS和反病毒侦察
④主机攻防演练：MS17-010、MS08-067、MS10-046、MS12-20等

3、操作系统基础（1周）
①Windows系统常见功能和命令
②Kali Linux系统常见功能和命令
③操作系统安全（系统入侵排查/系统加固基础）

4、计算机网络基础（1周）
①计算机网络基础、协议和架构
②网络通信原理、OSI模型、数据转发流程
③常见协议解析（HTTP、TCP/IP、ARP等）
④网络攻击技术与网络安全防御技术
⑤Web漏洞原理与防御：主动/被动攻击、DDOS攻击、CVE漏洞复现

5、数据库基础操作（2天）
①数据库基础
②SQL语言基础
③数据库安全加固

6、Web渗透（1周）
①HTML、CSS和JavaScript简介
②OWASP Top10
③Web漏洞扫描工具
④Web渗透工具：Nmap、BurpSuite、SQLMap、其他（菜刀、漏扫等）

那么，到此为止，已经耗时1个月左右。你已经成功成为了一名“脚本小子”。那么你还想接着往下探索吗？

阶段二：中级or高级网络安全工程师（看自己能力）

综合薪资区间15k~30k

7、脚本编程学习（4周）
在网络安全领域。是否具备编程能力是“脚本小子”和真正网络安全工程师的本质区别。在实际的渗透测试过程中，面对复杂多变的网络环境，当常用工具不能满足实际需求的时候，往往需要对现有工具进行扩展，或者编写符合我们要求的工具、自动化脚本，这个时候就需要具备一定的编程能力。在分秒必争的CTF竞赛中，想要高效地使用自制的脚本工具来实现各种目的，更是需要拥有编程能力。

零基础入门的同学，我建议选择脚本语言Python/PHP/Go/Java中的一种，对常用库进行编程学习
搭建开发环境和选择IDE，PHP环境推荐Wamp和XAMPP，IDE强烈推荐Sublime；

Python编程学习，学习内容包含：语法、正则、文件、网络、多线程等常用库，推荐《Python核心编程》，没必要看完

用Python编写漏洞的exp,然后写一个简单的网络爬虫

PHP基本语法学习并书写一个简单的博客系统

熟悉MVC架构，并试着学习一个PHP框架或者Python框架 (可选)

了解Bootstrap的布局或者CSS。