原 适配iPhoneX

作者:汪娇娇

时间:2017年12月26日

我这里说的适配iPhoneX,是一种比较简单粗暴的适配法,就是填满整个屏幕(包括安全区域和上下左右这些边,见下图)。

1、meta标签

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

2、CSS

body {
    padding-top: constant(safe-area-inset-top);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏韩东吉的Unity杂货铺

零基础入门 35:自定义窗口

Hello,各位小伙伴,最近公司的事务繁多,所以稍微搁置了一下更新的速度,导致很多同学都以为我被恐怖分子绑架了

15120
来自专栏Python小屋

使用Jupyter Notebook+bokeh绘图入门完整步骤

Bokeh是一款基于浏览器的交互式绘图工具,在IPython Notebook中具有非常好的表现。 安装anaconda3,单击开始菜单,单击下图红色箭头所指菜...

28960
来自专栏HT

基于HTML5快速搭建TP-LINK电信拓扑设备面板

  今天我们以真实的TP-LINK设备面板为模型,完成设备面板的搭建,和指示灯的闪烁和图元流动。   先来目睹下最终的实现效果:http://www.hight...

275100
来自专栏大前端_Web

编写高效的CSS选择器

CSS规范并没有明确浏览器如何去实现样式系统,仅仅是说明了它们必须这样做。有鉴于此,不同的样式系统引擎可能会拥有完全不同的表现和行为,特别是 Gecko 与 W...

15140
来自专栏雨过天晴

控制台输出颜色控制(Console

前端时间,写了一篇 PHP 在 Console 模式下的进度显示 ,正好最近的一个数据合并项目需要用到控制台颜色输出,所以就把相关的信息整理下,写到OSC的博客...

1.3K10
来自专栏happyJared

IDEA快捷键拆解系列(四):View篇

  以下是关于View导航项及其每一子项的拆解介绍,其中,加粗部分的选项是博主认为比较重要的。

14510
来自专栏hightopo

基于HTML5快速搭建TP-LINK电信拓扑设备面板

15930
来自专栏葡萄城控件技术团队

三天学会HTML5 之第一天

引言 HTML5 一直是非常热门的话题,因此此系列文章主要从一些基本功能开始讲起,逐步深入了解HTML5的新概念。 首先了解一些基本的术语和概念。 SGML, ...

22770
来自专栏Android开发经验

hellocharts-android-Android图表开源库的使用(二)

18140
来自专栏点滴积累

PhiloGL学习(3)——程序员的法宝—键盘、鼠标

前言 上一篇文章中介绍了如何让对象动起来,本文介绍如何让场景响应我们的鼠标和键盘以控制场景的缩放及对象的转动和移动等。 一、 原理分析 有了上一篇文章的基础,我...

36570

扫码关注云+社区

领取腾讯云代金券