关于H5页面在iPhoneX适配

​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" οnclick="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 页面通用解决方案　

　

作者: lolDragon

出处: http://www.cnblogs.com/lolDragon/

关于H5页面在iPhoneX刘海屏适配(转）相关推荐

  1. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  2. Flutter iPhoneX 刘海屏适配

    对于Flutter来说,刘海屏主要适配的是上下的边距, 需要把不可点击的区域留出来,同时要把背景颜色和图片放上去. 对于上面的边距, 如果使用 Scaffold , appBar已经自动为我们做好了适 ...

  3. ios webview iphoneX 刘海屏适配

    参考文章:https://ayogo.com/blog/ios11-viewport/ 问题 webview 在iphoneX中的一些表现会不满足业务预期,如下广告,头部和底部都会留有空白,而业务方真 ...

  4. 微信小程序 - iPhoneX 刘海屏适配

    GitHub Demo 地址: jh-weapp-demo 实现一些常用效果.封装通用组件和工具类 小程序码 微信小程序适配 iPhone X 总结 方法一 js直接调用wx.getSystemInf ...

  5. 微信小程序 uniapp - iPhoneX 刘海屏适配

    一.js直接调用wx.getSystemInfoSync Page({data: {isIPhoneX:false,},onLoad: function () {this.setData({" ...

  6. android齐刘海屏幕适配,Html5适配iphoneX刘海屏的简单实现i

    iPhoneX遮住刘海屏幕就黑一下 怎么解除这种设置啊 在手机桌面找到设置,点击打开. 在设置界面找到通用,点击进去. 在通用界面找到辅助功能,点击进去. 在辅助功能界面找到显示调节,点击进去. 在显 ...

  7. Android 刘海屏适配

    转载:原文链接 一.简介 随着 Apple 发布 iPhone X 之后,各大手机厂商也开始模仿这种刘海屏的设计,而且刘海屏手机的用户也是越来越大,前段时间将项目进行了所有主流厂商的刘海屏手机的适配, ...

  8. Android 系统（70）---Android刘海屏适配方案

    Android刘海屏适配方案 什么是刘海屏 随着iPhone X发布,国内一些厂商也推出了刘海屏手机,即将发布的Android p也提供了对刘海屏的支持.so,我们的app也要提前做好适配. 屏幕的正 ...

  9. Android P(3)---Android P版本刘海屏适配指南

    Android P版本刘海屏适配指南 Android P预览版增加了很多亮点新特性,其中最接地气.最直观的改变当属适配了类似于华为P20的顶部凹槽屏幕设计这一项,俗称刘海屏. 在开发者模式中,Andr ...

最新文章

  1. spark最新源码下载并导入到开发环境下助推高质量代码(Scala IDEA for Eclipse和IntelliJ IDEA皆适用）（以spark2.2.0源码包为例）（图文详解）...
  2. 【2012年华为校园招聘软开上机-成都】字母转换、统计单词个数
  3. windows下自制动画层引擎 - 放两个demo
  4. mockito_吸收Mockito的流利度
  5. [css] border-radius:50%和border-radius:100%有什么区别？
  6. leetcode设计链表,非常工整的实现你值得拥有
  7. python类实例化_python基础8之类的实例化过程剖析
  8. c语言插入排序算法_插入排序算法，流程图和C，C ++代码
  9. jq判断html加载完成,jquery – 检测页面是否已完成加载
  10. 计算机表情识别技术研究学什么,表情识别的图像预处理和特征提取方法研究
  11. Vue method与computed的区别
  12. 发现一个 WPF/E Asp.net Server Control
  13. ORACLE decode
  14. URL和URI的区别和联系
  15. 信息学奥赛一本通 提高篇
  16. 计算机原理 复位信号解释,复位电路原理
  17. java读写十六进制文件_Java：文件到十六进制
  18. 网络工程师考试资料汇总
  19. 战争英雄、同性恋和计算机科学的奠基人
  20. MacBook将大文件分割成很多个小文件split命

热门文章

  1. Vscode删除空白行
  2. AtCoder Beginner Contest 190 D - Staircase Sequences
  3. Node.js七天搞定微信公众号（又名：Koa2实现电影微信公众号前后端开发）- 问题汇总
  4. 计算机网络的一些小知识
  5. JAVA:实现求StandardDeviation标准差算法(附完整源码)
  6. SDEdit一点成画，小白也能是绘画大师！
  7. OOzie 入门 【转】
  8. MyBatis_Plus(Spring版本笔记)
  9. java语言实现视频音频采集_详解js的视频和音频采集
  10. 信通方恒资产评估行业快讯：铁矿石供需关系未发生明显变化