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. caffe中的fine-tuning

    caffe finetune两种修改网络结构prototxt方法 第一种方法:将原来的prototxt中所有的fc8改为fc8-re.(若希望修改层的学习速度比其他层更快一点,可以将lr_mult改为 ...

  2. 解决微信小程序ios端滚动卡顿的问题

    方案1:直接使用微信小程序提供的 “scroll-view " 组件. <scroll-view scroll-y style="height: 100%;"> ...

  3. 浅谈压缩感知（十七）：测量矩阵之有限等距常数RIC的计算

    有限等距常数(RestrictedIsometry Constant, RIC)是与有限等距性质(Restricted IsometryProperty, RIP)紧密结合在一起的一个参数. 一.RI ...

  4. vim IDE配置

    参考: http://www.cnblogs.com/witcxc/archive/2011/12/28/2304704.html http://www.cnblogs.com/ma6174/arch ...

  5. WIN10平板系统 如何自定义分辨率，修改分辨率

    从以下网址下载Intel网卡驱动,注意只要下载zip版本的(如果是exe版本的,双击将提示win10无法为此计算机验证正在安装的驱动程序,也包括你用驱动精灵这种软件,也会安装的时候由于这个问题装不上) ...

  6. 微软BI 之SSIS 系列 - 变量查询语句引起列输出顺序不一致的解决方法

    开篇介绍 这个问题来自于 天善BI社区,看了一下比较有意思,因为我自己认为在 SSIS中处理各种类型文件的经验还比较丰富(有一年的时间几乎所有ETL都跟文件相关),但是这个问题确实之前没有特别考虑过. ...

  7. docker-compose中启动镜像失败的问题

    http://blog.csdn.net/boling_cavalry/article/details/79050451 解决docker-compose启动镜像失败的问题: 原文地址:http:// ...

  8. Android 里的数据储存

    数据持久化 关于数据储存,这个话题已经被反复讨论过很多次了,我是不建议把网络存储这种方式纳入到数据储存的范围的,因为这个和Android没多少关系,因此就有如下的分类: 本地储存(也称之为数据持久化, ...

  9. 实现一个原子的正整数类：AtomicPositiveInteger

    import java.util.concurrent.atomic.AtomicInteger; public class AtomicPositiveInteger extends Number ...

  10. 天猫魔盒1代TMB100E刷机, 以及右声道无声的问题

    这个是在小米盒子1代之后买的, 当时速度比小米盒子快, 除了遥控器比较软, 电池盖不太对得齐以外, 用起来还不错. 但是时间长了之后总是不停自己升级, 自己安装一些应用, 还删不了, 要知道这个盒子的 ...