1.  iPhoneX的介绍

屏幕尺寸

我们熟知的iPhone系列开发尺寸概要如下：

△ iPhone各机型的开发尺寸

转化成我们熟知的像素尺寸：

△ 每个机型的多维度尺寸

倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现。倍图核心的影响因素在于PPI（DPI），了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念：《基础知识学起来！为设计师量身打造的DPI指南》

iPhone8在本次升级中，屏幕尺寸和分辨率都遗传了iPhone6以后的优良传统；

然而iPhone X 无论是在屏幕尺寸、分辨率、甚至是形状上都发生了较大的改变，下面以iPhone 8作为参照物，看看到底iPhone X的适配我们要怎么考虑。

我们看看iPhone X尺寸上的变化：

2.  iPhoneX的适配---安全区域(safe area)

苹果对于 iPhone X 的设计布局意见如下：

核心内容应该处于 Safe area 确保不会被设备圆角(corners)，传感器外壳(sensor housing，齐刘海) 以及底部的 Home Indicator 遮挡。也就是说 我们设计显示的内容应该尽可能的在安全区域内；

3.  iPhoneX的适配---适配方案viewport-fit

3.1  PhoneX的适配，在iOS 11中采用了viewport-fit的meta标签作为适配方案；viewport-fit的默认值是auto。

　　  viewport-fit取值如下：

                                                  auto 默认：viewprot-fit:contain;页面内容显示在safe area内
                                                  cover viewport-fit:cover,页面内容充满屏幕

　　    viewport-fit meta标签设置(cover时)

<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">

3.2  css constant()函数 与safe-area-inset-top & safe-area-inset-left & safe-area-inset-right & safe-area-inset-bottom的介绍

如上图所示 在iOS 11中的WebKit包含了一个新的CSS函数constant()，以及一组四个预定义的常量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom。当合并一起使用时，允许样式引用每个方面的安全区域的大小。

3.1当我们设置viewport-fit:contain,也就是默认的时候时;设置safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom等参数时不起作用的。

3.2当我们设置viewport-fit:cover时：设置如下

body {padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px            padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0                padding-right: constant(safe-area-inset-right); //如果未竖屏时为0                padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
}

4.   iPhoneX的适配---高度统计

viewport-fit:cover + 导航栏

　　

5.iPhoneX的适配---媒体查询

注意这里采用的是690px(safe area高度)，不是812px;

1
2
3
4
5
@media only screen and (width: 375px) and (height: 690px){
    body {
        background: blue;
    }
}

6.iphoneX viewport-fit  问题总结

1.关于iphoneX 页面使用了渐变色时；如果viewport-fit:cover;

1.1在设置了背景色单色和渐变色的区别，如果是单色时会填充整个屏幕，如果设置了渐变色 那么只会更加子元素的高度去渲染；而且页面的高度只有690px高度，上面使用了padding-top:88px;

　　

body固定为：

1
<body><div class="content">this is subElement</div></body>

1.单色时：

       * {padding: 0;margin: 0;        }        body {background:green;padding-top: constant(safe-area-inset-top); //88px            /*padding-left: constant(safe-area-inset-left);*/            /*padding-right: constant(safe-area-inset-right);*/            /*padding-bottom: constant(safe-area-inset-bottom);*/        }

2.渐变色

       * {padding: 0;margin: 0;}body {background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22));padding-top: constant(safe-area-inset-top); //88px/*padding-left: constant(safe-area-inset-left);*//*padding-right: constant(safe-area-inset-right);*//*padding-bottom: constant(safe-area-inset-bottom);*/}

解决使用渐变色 仍旧填充整个屏幕的方法；CSS设置如下

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="initial-scale=1, viewport-fit=cover"><title>Designing Websites for iPhone X: Respecting the safe areas</title><style>        * {padding: 0;margin: 0;}html, body {height: 100%;}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);}.content {background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22));width: 100%;height: 724px;}    </style>
</head>
<body>
<div class="content">this is subElement</div>
</body>
</html>

2.页面元素使用了固定定位的适配即：{position:fixed;}

2.1 子元素页面固定在底部时；使用viewport-fit:contain时;可以看到bottom:0时只会显示在安全区域内；

<!DOCTYPE html>
<html>
<head><meta name="viewport" content="initial-scale=1"><!--<meta name="viewport" content="initial-scale=1, viewport-fit=cover">--><title>Designing Websites for iPhone X: Respecting the safe areas</title><style>* {padding: 0;margin: 0;}/*html,body {*//*height: 100%;*//*}*/body {background: grey;/*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);*/}.top {width: 100%;height: 44px;background: purple;}.bottom {position: fixed;bottom: 0;left: 0;right: 0;height: 44px;color: black;background: green;}</style>
</head>
<body><div class="top">this is top</div><div class="bottom">this is bottom</div>
</body>
</html>

2.1 子元素页面固定在底部时；使用viewport-fit:cover时;可以看到bottom:0时只会显示在安全区域内；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
* {
    padding: 0;
    margin: 0;
}
/*html,body {*/
    /*height: 100%;*/
/*}*/
body {
    background: grey;
    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);*/
}
.top {
    width: 100%;
    height: 44px;
    background: purple;
}
.bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 44px;
    color: black;
    background: green;
}

添加html,body   {width:100%;heigth:100%}

图1：

 * {padding: 0;margin: 0;}html,body {height: 100%;}body {background: grey;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);}.top {width: 100%;height: 44px;background: purple;}.bottom {position: fixed;bottom: 0;left: 0;right: 0;height: 44px;color: black;background: green;}

图2：

       * {padding: 0;margin: 0;}html,body {height: 100%;}body {background: grey;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);*/}.top {width: 100%;height: 44px;background: purple;}.bottom {position: fixed;bottom: 0;left: 0;right: 0;height: 44px;color: black;background: green;}

2.3 关于alertView弹框 遮罩层的解决方案

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><!--<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">--><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"><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><title>alertView</title><script data-res="eebbk">document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px';</script><style>* {margin: 0;padding: 0;}html,body {width: 100%;height: 100%;}body {font-size: 0.32rem;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);}.content {text-align: center;}.testBut {margin: 50px auto;width: 100px;height: 44px;border: 1px solid darkgray;outline:none;user-select: none;background-color: yellow;}</style><link href="alertView.css" rel="stylesheet" type="text/css">
</head>
<body><section class="content"><button class="testBut" onclick="showLoading()">弹框加载</button></section><script type="text/javascript" src="alertView.js"></script><script>function showLoading() {UIAlertView.show({type:"input",title:"温馨提示",              //标题
               content:"VIP会员即将到期",     //获取新的
               isKnow:false});var xx = new UIAlertView();console.log(xx);}</script>
</body>
</html>

参考资料：

　iPhone X的Web设计

iPhone X适配没那么复杂，但也不是看上去这么简单

剖析 iOS 11 网页适配问题

　iPhone X(10)屏幕分辨率与适配

iPhone X 适配手Q H5 页面通用解决方案　

转载地址：https://www.cnblogs.com/lolDragon/p/7795174.html

转载内容，文章中不正之处，请不吝赐教。

iOS 11与早期版本不同之处在于 webview 内容现在遵循安全区域。这意味着如果你的 header 是一个的 top 设置为 0 的固定(fixed)定位的元素，它将被初始渲染在离屏幕顶部向下 20px 的位置， 对齐到状态栏的底部。当你向下滚动页面时，它会在状态栏后面移动。当你向上滚动，它将再次滑到到状态栏的下方（网页内容会在那条尴尬的 20px 的缝隙中显示）。

你可以在下面这个视频看到有多糟糕：

幸运的是，将 viewport-fit=cover 添加到 meta viewport 标签就可以轻松修复。

iPhone X 和 iOS 11 其他一些技巧

关于 viewport-fit

viewport-fit可以设置可视窗口（Visual Viewport）的大小。在设备的物理屏幕上看到的初始布局视窗。在圆形屏幕上，当前屏幕上显示的部分是圆形的，但是Viewport却是矩形的。因此，根据Viewport的大小，页面的某些部可能被剪切。

viewport-fit 接受三个值：

  • auto：这个值不影响初始布局视窗，整个Web页面是可视的。在视窗之外的UA绘制的是未定义的，它可能是画布的背景色，或者是UA认为合适的其他东西；
  • contain：最初的布局视窗和视觉布局视窗被设置为最大的矩形。在Viewport之外的UA绘制的是未定义的，它可能是画布的背景色，或者UA认为合适的其他东西；
  • cover：初始布局视窗和视觉布局视窗被设置为设备物理屏幕的限定矩形；

CSS constants 示例

假设你有一个固定(fixed)定位的标题栏，在 iOS 10及之前的 CSS 目前看起来像这样：

CSS 代码:
  1. header {
  2. position: fixed;
  3. top: 0;
  4. left: 0;
  5. right: 0;
  6. height: 44px;
  7. padding-top: 20px; /* 状态栏高度 */
  8. }

要使 iPhone X 和其他 iOS 11 设备自动进行调整，您可以将 viewport-fit=cover 添加到 meta viewport 标签，并更改 CSS 来引用常量：

CSS 代码:
  1. header {
  2. /* ... */
  3. /* iOS 10 上 状态栏高度 */
  4. padding-top: 20px;
  5. /* iOS 11+ 上 状态栏高度 */
  6. padding-top: constant(safe-area-inset-top);
  7. }

对于不能识别 constant() 语法的旧设备，请保留备用值。您也可以在CSS calc() 表达式中使用常量。

主题颜色 theme color

iPhone X 在 portrait 模式下（竖屏）状态栏和URL地址栏会有一定的透明度，所以他们会显示半透明的网页背景色 background。

这与 Android 上的 Chrome 渲染 theme-color meta 标签类似，以便在状态栏中使用网页的主要颜色。

HTML 代码:
  1. <meta name="theme-color" content="#676767">

如果你要覆盖整个可视窗口(viewport)，那么你可能需要一点点小技巧才能避免隐藏内容！请查看 这条推文

大部分内容来自：

  • https://css-tricks.com/the-notch-and-css/
  • https://ayogo.com/blog/ios11-viewport/

转载地址：http://www.css88.com/archives/8224

H5页面 iPhoneX适配相关推荐

  1. H5中 iphoneX适配

    关于H5页面在iPhoneX适配 ​1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多 ...

  2. h5适配华为手机_rem、px、em(手机端h5页面屏幕适配的几种方法)

    px px像素(pixel):相对长度单位.相对于显示器屏幕分辨率而言.pc端使用px倒也无所谓,可是在移动端,因为手机分辨率种类颇多,不可能一个个去适配,这时px就显得非常无力,所以就要考虑em和r ...

  3. H5 页面适配所有 iPhone 和安卓机型的六个技巧

    目前,很多APP设计师小伙伴已经开始转向H5前端开发啦,但是解决所有iPhone和安卓机型的适配问题是我们的重中之重.无论是设计APP还是写前端H5.都是要考虑移动端的兼容性. 25学堂今天跟大家来回 ...

  4. 使用Flexible实现手淘H5页面的终端适配

    转载自:使用Flexible实现手淘H5页面的终端适配 更多参考:移动端高清.多屏适配方案    移动端应该如何动态设置字体大小? 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟 ...

  5. android 挖孔屏适配_使用Flexible实现手淘H5页面的终端适配

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论-- ...

  6. 使用Flexible实现手淘H5页面的终端适配【转】

    曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论-- ...

  7. vue中h5页面的搭建

    在工作中可能会遇到h5页面的搭建,本篇文章主要讲解如何从零开始搭建一个vue项目,实现h5页面的适配,浏览器默认样式的清除,路由的配置,项目的打包等,那就让我们开始学习吧. 如果大家只是需要一个完整的 ...

  8. 软件测试之H5页面测试总结（参考）

    参考:软件测试之H5页面测试总结https://mp.weixin.qq.com/s/D0_uPMbP4FeIoD_rVpV4Mg 前言 大家反馈资源失效的问题,小编已经收到了,资源还是给和谐,小编也 ...

  9. 关于H5页面在iPhoneX刘海屏适配(转）

    关于H5页面在iPhoneX适配 ​1.  iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多 ...

  10. 苹果状态栏HTML,iphoneX 适配客户端H5页面的方法教程

    前言 目前,很多APP设计师小伙伴已经开始转向H5前端开发啦,但是解决所有iPhone和安卓机型的适配问题是我们的重中之重.无论是设计APP还是写前端H5.都是要考虑移动端的兼容性. 由于iphone ...

最新文章

  1. 往往客户的需求是逐渐被深入的真正的实际需求往往没刚开始所说的那么简单容易就可以搞定...
  2. 深度解析 TypeConverter TypeConverterAttribute （二）
  3. Linux中常用的命令
  4. LSGANs ： Least Squares GAN（最小二乘GAN）--解决标准GAN生成的图片质量不高以及训练过程不稳定问题
  5. 把Apache里面的网站和MySQL数据库移动到home盘
  6. python实现共轭梯度算法（含误差与运算次数的折线图）
  7. ArcGIS中，一个点集里的点两两连线，比如有4个点，就连6条线
  8. MYSQL禁用与启用事件
  9. python学习之路---day12
  10. 流水账——利用MFC开发的小软件
  11. python中计算带分数_[NVDA addon] Access8Math 2.3 數學輔助程式 - 更新相容於 python3
  12. Django搭建个人博客之制作app并配置相关环境
  13. 大一html网页制作PPT,HTML网页制作.ppt
  14. 2020淘宝双十一快速刷金币工具
  15. Hadoop综合大作业+补交平时作业
  16. 工程师职称评审两大阶段要明白！
  17. java pdf 转换 word_如何使用Java将pdf文件转换为word文件
  18. 计算机ps2定义,软件硬件界面接口定义 bt656 硬件接口定义
  19. PHP安装包TS和NTS的区别
  20. 使用 U 盘启动盘安装 Windows 7 旗舰版系统

热门文章

  1. AcWing120 防线
  2. 阿里云域名优惠口令获取及使用方法
  3. jstl 无法自动加载c.tld文件
  4. [20151018]SCZ训练
  5. 如何用计算机校验信息,支付宝短信校验服务怎么开通？-电脑教程
  6. android电视APP开机自启动,安卓电视、机顶盒如何开机自动启动看电视直播-今日头条...
  7. C++中按名次排序的两个实现方式
  8. 远程过程调用失败而且未执行怎么办
  9. emeditor的快捷键
  10. supermap idesktop 许可更新方案