H5页面适配iPhoneX(就是那么简单)


Posted in HTML / CSS onDecember 02, 2019

iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素)。

笔者通过查阅了一些官方文档,以及结合实际项目中的一些处理经验,整理了一套简单的适配方案分享给大家,希望对大家有所帮助,以下是处理前后效果图:

H5页面适配iPhoneX(就是那么简单)

大家都知道,iphoneX,屏幕顶部都有一个齐刘海,iPhoneX 取消了物理按键,改成底部小黑条,如果不做适配,这些地方就会被遮挡,因此本文讲述下齐刘海与底部小黑条的适配方法。

几个新概念

安全区域

安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)影响,如下图所示:

H5页面适配iPhoneX(就是那么简单) 

viewport-fit

iOS11 新增特性,苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展,用于设置网页在可视窗口的布局方式,可设置 三个值

描述
auto 默认值,跟 contain 表现一致。页面内容显示在safe area内。viewprot-fit:auto等同于viewport-fit:contain
contain 可视窗口完全包含网页内容(左图)。页面内容显示在safe area内。viewport-fit:contain
cover 网页内容完全覆盖可视窗口(右图)。页面内容充满屏幕。viewport-fit:cover

constant 函数

iOS11 新增特性,Webkit 的一个 CSS 函数,用于设定安全区域与边界的距离,有四个预定义的变量(单位是px):

  • safe-area-inset-left:安全区域距离左边界距离
  • safe-area-inset-right:安全区域距离右边界距离
  • safe-area-inset-top:安全区域距离顶部边界距离
  • safe-area-inset-bottom:安全区域距离底部边界距离

注意:网页默认不添加扩展的表现是 viewport-fit=contain,需要适配 iPhoneX 必须设置viewport-fit=cover,不然 constant 函数是不起作用的,这是适配的必要条件。

  • 官方文档中提到将来 env() 要替换 constant () ,目前还不可用
  • 这两个函数都是 webkit 中 css 函数,可以直接使用变量函数,只有在 webkit 内核下才支持 constant
  • 针对iOS < 11.2以下系统
  • env :针对于iOS >= 11.2的系统

注意:网页默认不添加扩展的表现是 viewport-fit=contain ,需要适配 iPhone 必须设置 viewport-fit=cover ,这是适配的关键步骤。

适配例子

第一步:设置网页在可视窗口的布局方式

<meta name='viewport'  content="width=device-width, viewport-fit=cover"  />

第二步:页面主体内容限定在安全区域内

body {
  /* 适配齐刘海*/
  padding-top: constant(safe-area-inset-top);  
 /* 适配底部黑条*/
  padding-bottom: constant(safe-area-inset-bottom);
}

第三步:fixed 元素的适配

bottom 不是0的情况

/* bottom 不是0的情况 */
.fixed {
  bottom: calc(50px(原来的bottom值) + constant(safe-area-inset-bottom));
}

吸底的情况(bottom=0)

/* 方法1 :设置内边距 扩展高度*/
/* 这个方案需要吸底条必须是有背景色的,因为扩展的部分背景是跟随外容器的,否则出现镂空情况。*/
.fix {
  padding-bottom: constant(safe-area-inset-bottom);
}
/* 直接扩展高度*/
.fix {
  height: calc(60px(原来的高度值) + constant(safe-area-inset-bottom));
}

/* 方法2 :在元素下面用一个空div填充, 但是背景色要一致 */
.blank {
  position: fixed;
  bottom: 0;
  height: 0;
  width: 100%;
  height: constant(safe-area-inset-bottom);
  background-color: #fff;
}
/* 吸底元素样式 */
.fix {
  margin-bottom: constant(safe-area-inset-bottom);
}

最后: 使用@supports

因为只有有齐刘海和底部黑条的机型才需要适配样式,可以用@support配合使用:

@supports (bottom: constant(safe-area-inset-bottom)) {
  body {
    padding-bottom: constant(safe-area-inset-bottom);
  }
}

完整检测代码

@supports隔离兼容模式

因为只有有齐刘海和底部黑条的机型才需要适配样式,可以用@support配合使用:

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

@mixin iphonex-support {
  @supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}

@media 媒体查询

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

/* iphonex 适配 */
@mixin iphonex-media {
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}

补充

注意项

env 和 constant 只有在 viewport-fit=cover 时候才能生效, 上面使用的safari 的控制台可以检测模拟器中网页开启web inspector.

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

HTML / CSS 相关文章推荐
css3.0新属性效果在ie下的解决方案
May 10 HTML / CSS
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
Nov 13 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
Jan 25 HTML / CSS
CSS3绘制不规则图形的一些方法示例
Nov 07 HTML / CSS
CSS3模拟动画下拉菜单效果
Apr 12 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
html5 Canvas画图教程(1)—画图的基本常识
Jan 09 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
html5 Canvas实现图片旋转的示例
Jan 15 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
开发微信小程序之WXSS样式教程
Apr 18 HTML / CSS
web字体加载方案优化小结
Nov 29 #HTML / CSS
HTML5 Blob 实现文件下载功能的示例代码
Nov 29 #HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 #HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 #HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 #HTML / CSS
HTML5 weui使用笔记
Nov 21 #HTML / CSS
移动端html5判断是否滚动到底部并且下拉加载
Nov 19 #HTML / CSS
You might like
用PHP函数解决SQL injection
2006/12/09 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
2021/03/09 Javascript
JavaScript初学者应注意的七个细节小结
2012/01/30 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
javascript刷新父页面的各种方法汇总
2014/09/03 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
javascript原生ajax写法分享
2016/04/10 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
分享JavaScript监听全部Ajax请求事件的方法
2016/08/28 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python中使用xlrd读excel使用xlwt写excel的实例代码
2018/01/31 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
python实现事件驱动
2018/11/21 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
tensorflow的计算图总结
2020/01/12 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
CSS中垂直居中的简单实现方法
2015/07/06 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
简单的JAVA编程面试题
2013/03/19 面试题
节水标语大全
2014/06/11 职场文书
邓小平理论心得体会
2014/09/09 职场文书
小学感恩节活动策划方案
2014/10/06 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书