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


Posted in HTML / CSS onSeptember 05, 2019

前言

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

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

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

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

几个新概念

安全区域

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

Html5 页面适配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常用功能的写法
Jun 05 HTML / CSS
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
Mar 17 HTML / CSS
使用 css3 实现圆形进度条的示例
Jul 05 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
HTML5所有标签汇总及标签意义解释
Mar 12 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
Sep 19 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
CSS变量实现主题切换的方法
Jun 23 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 #HTML / CSS
three.js模拟实现太阳系行星体系功能
Sep 03 #HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 #HTML / CSS
详解canvas绘制网络字体几种方法
Aug 27 #HTML / CSS
前端实现打印图像功能
Aug 27 #HTML / CSS
html5 canvas绘制网络字体的常用方法
Aug 26 #HTML / CSS
HTML5超炫酷粒子效果的进度条的实现示例
Aug 23 #HTML / CSS
You might like
phpmyadmin的#1251问题
2006/11/25 PHP
使用adodb lite解决问题
2006/12/31 PHP
php 特殊字符处理函数
2008/09/05 PHP
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
orm获取关联表里的属性值
2016/04/17 PHP
PHP 表单提交及处理表单数据详解及实例
2016/12/27 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
使用git迁移Laravel项目至新开发环境的步骤详解
2020/04/06 PHP
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
JavaScript+canvas实现七色板效果实例
2016/02/18 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
Javascript+CSS3实现进度条效果
2016/10/28 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
AngularJS中table表格基本操作示例
2017/10/10 Javascript
vue组件jsx语法的具体使用
2018/05/21 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
vue 数据双向绑定的实现方法
2021/03/04 Vue.js
python装饰器-限制函数调用次数的方法(10s调用一次)
2018/04/21 Python
Python实现字典按key或者value进行排序操作示例【sorted】
2019/05/03 Python
python中时间模块的基本使用教程
2019/05/14 Python
python else语句在循环中的运用详解
2020/07/06 Python
matplotlib实现数据实时刷新的示例代码
2021/01/05 Python
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
3个CCIE对一个工程师的面试题
2012/05/06 面试题
行政人员工作职责
2013/12/05 职场文书
幼儿园国庆节活动方案
2014/02/01 职场文书
出生公证委托书
2014/04/03 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书
Win11应用商店打开闪退怎么解决? win11应用商店打不开的多种解决办法
2022/04/05 数码科技