iPhone X 配备一个覆盖整个手机的全面屏，顶部的“刘海”为相机和其他组件留出了空间。然而结果就是会出现一些尴尬的情景：网站被限制在一个“安全区域”，在两侧边缘会出现白条儿。移除这个白条儿也不难，给 body 设置一个 background-color 就可以搞定。或者，可以添加 viewport-fit=cover meta 标签，将整个网站扩展到整个屏幕。
`<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">`

然后就由你来决定被安全区域制约的重叠区了。有一些新的 CSS 可以助你一臂之力。Stephen Radford 文档：

为了处理这些需求，iOS 11 的 Safari 引入了一些 constant 来处理 viewport-fit=cover 属性。

  • safe-area-inset-top
  • safe-area-inset-right
  • safe-area-inset-left
  • safe-area-inset-bottom

这些值可以应用到 margin、padding 上，也可以应用到绝对定位的 top 或 left 上。

在网页的 container 上添加如下代码：

`padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);`

 

用CSS里的 viewport-fit 标签应对iPhone X 的刘海的更多相关文章

  1. 借助CSS Shapes实现元素滚动自动环绕iPhone X的刘海

    CSS代码: .box { max-width: 414px; height: 480px; border: solid #000; margin: auto; overflow: auto; } . ...

  2. [转]手机web HTML头信息解释和viewport meta标签解释

    <meta charset="utf-8" /> <link rel="shortcut icon" href="favicon.i ...

  3. HTML+CSS学习笔记(2) - 认识标签（1）

    HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...

  4. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  5. 关于解决asp.net mvc网站页面Banner图片即时更换css里背景图片url相对路径问题的新方案

    最近在网站首页上想将Banner壁纸给做到后台上传随时更改的效果.遇到问题便是:将上传的图片路径动态添加到首页css代码中,结果尝试了网上提供的思路,更改相对路径,换为url中“../../Conte ...

  6. CSS里的pointer-events属性

    现代浏览器里CSS的职责范围和JavaScript的越来越模糊分不清.比如CSS里-webkit-touch-callout属性在iOS里能禁止当用户点击时弹出气泡框.而本文要说的pointer-ev ...

  7. HTML+CSS学习笔记(4) - 认识标签（3）

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  8. CSS里的 no-repeat 是什么意思

    CSS里的 no-repeat是针对背景图片来说的.当你设置了no-repeat这个属性后,你的背景图片将不会被重复,再换一种说法,你在网站上所看到的背景图片就是你所添加的图片, 不会出现平铺或者重复 ...

  9. 【CSS学习笔记】a标签的四种伪类

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

随机推荐

  1. 可以替代putty的ssh客户端

    1. Bitvise SSH Client http://www.putty.org/ Bitvise SSH Client is an SSH and SFTP client for Windows ...

  2. android: 使用本地广播

    前面我们发送和接收的广播全部都是属于系统全局广播,即发出的广播可以被其他任何 的任何应用程序接收到,并且我们也可以接收来自于其他任何应用程序的广播.这样就很容 易会引起安全性的问题,比如说我们发送的一 ...

  3. Miscellaneos：ISV

    ylbtech-Miscellaneos:ISV ISV英文全称是Independent Software Vendors ,意为“独立软件开发商”,特指专门从事软件的开发.生产.销售和服务的企业,如 ...

  4. Go语言之高级篇beego框架之配置beego环境

    1.配置beego环境 进入部署目录中 软件部署目录: 把要部署的软件代码,放在src目录下面. 启动项目

  5. Android ViewFlipper增添ScrollView后不能滑动了

    Android ViewFlipper添加ScrollView后不能滑动了在Activity中添加ScrollView实现滚动activity的效果后,activity的滑动效果却无法生效了,原因是因 ...

  6. mongodb用户管理和服务安装

    一.忘记密码快速找回 任何系统忘记密码都是一样的操作:以无需授权的模式开启程序,然后进入系统修改权限设置,退出来重新以授权方式开启程序.MySQL是这样,MongoDB也是这样.好的系统都提供了无授权 ...

  7. 如何在WCF中用TcpTrace工具查看发送和接收的SOAP消息

    WCF对消息加密(只对消息加密,不考虑Authorize)其实很简单,只要在server和client端的binding加入security mode为Message(还有Transport, Tra ...

  8. Easyui的DataGrid 清除所有勾选的行。

    $('#grid').datagrid('clearChecked')='none';//清除所有勾选的行.

  9. R语言编程艺术#04#数据框（data.frame）

    从直观上看,数据框类似矩阵

  10. Ubuntu 13.10 解决虚拟机摄像头无法使用问题

    前段时间使用的是Ubuntu 13.04,使用virtualbox虚拟机 4.2版,虚拟机里边装的Windows 7和Windows8.1均无法使用摄像头.只要在USB设备中选上了摄像头,虚拟机系统准 ...