简述Html5 IphoneX 适配方法


Posted in HTML / CSS onFebruary 08, 2018

IphoneX 的适配,关键在于怎么让页面适应 “齐刘海”、底部操作区域以及大圆角问题。

IphoneX 相对于其他手机,不同之处在于设备虽同样都是一个屏幕,但其实被分为了好几个模块,具体见下图:

简述Html5 IphoneX 适配方法

我们正常的一个网页,搬到X上来,效果是 内容只显示在 Safe Area 安全区域,非安全区域部分没有网内容,也就是说头部和底部会出现白块,怎么处理?

解决办法

1. 给body加一个 background-color

为什么要加 background-color?有什么用? 注意到我们刚说到的 头部和底部会出现白块,其实说是白色其实并不准确,因为这个颜色其实来自于 body 的背景色。另外,我们上拉或下拉内容时会显示网页下方的内容及颜色,其实也是body的背景颜色。所以如果你想修改这两个效果,就可以设置一下 body 的背景色。

2. 添加 viewport-fit = cover 的 <meta> 标签

这一步极为关键。先看一下结果:

复制代码
代码如下:

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

为什么说极为关键? iphoneX 的主要问题就是除了安全区域外,其他地方不能显示网页内容,而它就是为解决这个问题而量身定制的。当设置了以上内容后,头部和底部就能开放给网页显示内容。
但是用了之后你会发现,区域是开放了,但是内容(常为导航栏)却因为“齐刘海”而被遮挡住了部分内容,并且,发现原本设置的100%的高度并没有占用全部高度空间,怎么办?

对于头部的高度和底部的高度,其实是有匹配值的,如下图:

简述Html5 IphoneX 适配方法

所以,我们有如下方案处理:

1. 修改我们导航栏的高度,为原本高度加上safe-area-inset-top 的高度,也就是44px;具体可以这么写:
height: calc(navHeight + 44px);,并且重新设置一下导航栏上文案的位置。

2. IOS 11的浏览器chromium内核提供了以下内容,也就是我们上图标注的那几个值:

  1. safe-area-inset-top
  2. safe-area-inset-right
  3. safe-area-inset-left
  4. safe-area-inset-bottom

怎么用呢?很简单:

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       
}

也许你没见过 constant这个东西,我以前也没见过,它也是专为iphoneX而设计的值,注意只有当你的 <meta> 标签加上了 viewport-fit=cover 之后,该值才能生效。当然,在android手机上,是不会被识别的。

3. 只为 IphoneX 生效

注意了,我们做的这个适配是只为 IphoneX 生效的,并不能影响到其他手机,所以我们要做响应式布局,即,使用媒体查询,如下:

// 注意这里采用的是690px(safe area高度),不是812px;
@media only screen and (width: 375px) and (height: 690px){
    body {
        height: 100vh;
    }
}

有资料说上面这么用是ok的,然而我用着却没啥效果,于是我放宽了点条件,做了修改如下:

@media only screen and (width: 375px) and (min-height: 690px){
    body {
       height: 100vh;
    }
}

区别在于我是识别宽度为375px,高度大于690px 的设备即为 IphoneX。当然,目前只有X 这款设备符合该条件。

4. 网页高度变化

先强调一下,这部分不太确定,我自己遇到了,提出来说明一下:

设置了 viewport-fit 之后,会发现原本设置的100% 的高度不符合预期了,只占用了部分屏幕空间,其实,不急,只需要作如下修改:

@media only screen and (width: 375px) and (min-height: 690px) {
    body {
        height: 100vh;
    }
}

vh 是检查 viewport 即视口的高度,1vh = 1% 视口高度,是个绝对单位。设置100vh的意思就是占满全屏高度

5. 导航栏吸顶,任务栏吸底

页面内容可以拉动,如果导航栏也随着滑动,效果很丑,这就需要我们实现导航栏吸顶效果。实现大家都会就不多说,这里展示我的一个案例:

@media only screen and (width: 375px) and (min-height: 690px){
  div {
    position: fixed;
    display: block;
    z-index: 300;
  }
  .bg {
    height: calc(3.5rem + 44px);
  }
  p {
    margin-top: 44px;
  }
}

任务栏同理。 

后语

本文只是简单的描述一下如何处理IphoneX的适配问题的具体步骤,如果还想更深入的了解原理,欢迎大家到评论区交流。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
前端面试必备之CSS3的新特性
Sep 05 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 HTML / CSS
HTML5混合开发二维码扫描以及调用本地摄像头
Dec 27 HTML / CSS
使用HTML5进行SVG矢量图形绘制的入门教程
Feb 19 HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
CSS3 制作的图片滚动效果
Apr 14 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 #HTML / CSS
canvas绘制视频封面的方法
Feb 05 #HTML / CSS
HTML5新特性之type=file文件上传功能
Feb 02 #HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
Jan 31 #HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 #HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 #HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
Jan 29 #HTML / CSS
You might like
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
基于ubuntu下nginx+php+mysql安装配置的具体操作步骤
2013/04/28 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
PHP文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP查找与搜索数组元素方法总结
2015/06/12 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
Javascript 原型和继承(Prototypes and Inheritance)
2009/04/01 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
Javascript中arguments用法实例分析
2015/06/13 Javascript
jquery实现的淡入淡出下拉菜单效果
2015/08/25 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
JavaScript中使用import 和require打包后实现原理分析
2018/03/07 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
一行JavaScript代码如何实现瀑布流布局
2020/12/11 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
python抽取指定url页面的title方法
2018/05/11 Python
python障碍式期权定价公式
2019/07/19 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
双十佳事迹材料
2014/01/29 职场文书
数学高效课堂实施方案
2014/03/29 职场文书
《神奇的克隆》教学反思
2014/04/10 职场文书
2014坚持党风廉政建设思想汇报
2014/09/18 职场文书
大学拉赞助协议书范文
2014/09/26 职场文书
个人四风问题整改措施
2014/10/24 职场文书
公司慰问信范文
2015/03/23 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle