简述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实现自定义Tooltip边框涂鸦风格的教程
Nov 05 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 HTML / CSS
深入剖析webstorage[html5的本地数据处理]
Jul 11 HTML / CSS
HTML5标签小集
Aug 02 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
移动端解决悬浮层(悬浮header、footer)会遮挡住内容的3种方法
Mar 27 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 HTML / CSS
VW、VH适配移动端的解决方案与常见问题
May 21 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中数组合并的两种方法及区别介绍
2012/09/14 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
php查询mysql数据库并将结果保存到数组的方法
2015/03/18 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
PHP实现小偷程序实例
2016/10/31 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
php-fpm中max_children的配置
2019/03/15 PHP
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
jQuery 判断是否包含在数组中Array[]的方法
2016/08/03 Javascript
JS中关于事件处理函数名后面是否带括号的问题
2016/11/16 Javascript
微信小程序 解析网页内容详解及实例
2017/02/22 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
2017/04/14 Javascript
利用forever和pm2部署node.js项目过程
2017/05/10 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
小程序实现多选框功能
2018/10/30 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
详解JavaScript 高阶函数
2020/09/14 Javascript
Python中二维列表如何获取子区域元素的组成
2017/01/19 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Django通过dwebsocket实现websocket的例子
2019/11/15 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
广告词串烧
2014/03/19 职场文书
仓库管理员岗位职责
2014/03/19 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
公司员工宿舍管理制度
2015/08/07 职场文书
《所见》教学反思
2016/02/23 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python