H5网页适配 iPhoneX,就是这么简单

  iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素)。笔者通过查阅了一些官方文档,以及结合实际项目中的一些处理经验,整理了一套简单的适配方案分享给大家,希望对大家有所帮助,

您可能感兴趣的相关文章
  • 网站开发中很有用的 jQuery 效果【附源码】
  • 分享35个让人惊讶的 CSS3 动画效果演示
  • 十分惊艳的8个 HTML5 & JavaScript 特效
  • Web 开发中很实用的10个效果【源码下载】
  • 12款经典的白富美型 jQuery 图片轮播插件

以下是处理前后效果图:

适配之前需要了解的几个新知识

安全区域

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

也就是说,我们要做好适配,必须保证页面可视、可操作区域是在安全区域内。

更详细说明,参考文档:Human Interface Guidelines - iPhoneX

viewport-fit

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

  • contain: 可视窗口完全包含网页内容(左图)
  • cover:网页内容完全覆盖可视窗口(右图)
  • auto:默认值,跟 contain 表现一致

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

更详细说明,参考文档:viewport-fit-descriptor

constant 函数

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

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

这里我们只需要关注 safe-area-inset-bottom 这个变量,因为它对应的就是小黑条的高度(横竖屏时值不一样)。

注意:当 viewport-fit=contain 时 constant 函数是不起作用的,必须要配合 viewport-fit=cover 使用。对于不支持 constant 的浏览器,浏览器将会忽略它。
官方文档中提到 env 函数即将要替换 constant 函数,笔者测试过暂时还不可用。

更详细说明,参考文档:Designing Websites for iPhone X

如何适配

了解了以上所说的几个知识点,接下来我们适配的思路就很清晰了。

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

新增 viweport-fit 属性,使得页面内容完全覆盖整个窗口:

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

 

前面也有提到过,只有设置了 viewport-fit=cover,才能使用 constant 函数。

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

这一步根据实际页面场景选择,如果不设置这个值,可能存在小黑条遮挡页面最底部内容的情况。

1
2
3
body {
padding-bottom: constant(safe-area-inset-bottom);
}

 

第三步:fixed 元素的适配

类型一:fixed 完全吸底元素(bottom = 0),比如下图这两种情况:

可以通过加内边距 padding 扩展高度:

1
2
3
{
padding-bottom: constant(safe-area-inset-bottom);
}

 

或者通过计算函数 calc 覆盖原来高度:

1
2
3
{
height: calc(60px(假设值) + constant(safe-area-inset-bottom));
}

 

注意,这个方案需要吸底条必须是有背景色的,因为扩展的部分背景是跟随外容器的,否则出现镂空情况。

还有一种方案就是,可以通过新增一个新的元素(空的颜色块,主要用于小黑条高度的占位),然后吸底元素可以不改变高度只需要调整位置,像这样:

1
2
3
{
margin-bottom: constant(safe-area-inset-bottom);
}

空的颜色块:

1
2
3
4
5
6
7
{
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
background-color: #fff;
}

 

类型二:fixed 非完全吸底元素(bottom ≠ 0),比如 “返回顶部”、“侧边广告” 等

像这种只是位置需要对应向上调整,可以仅通过外边距 margin 来处理:

1
2
3
{
margin-bottom: constant(safe-area-inset-bottom);
}

 

或者,你也可以通过计算函数 calc 覆盖原来 bottom 值:

1
2
3
{
bottom: calc(50px(假设值) + constant(safe-area-inset-bottom));
}

 

别忘了使用 @supports

写到这里,我们常见的两种类型的 fixed 元素适配方案已经了解了吧,但别忘了,一般我们只希望 iPhoneX 才需要新增适配样式,我们可以配合 @supports 这样编写样式:

1
2
3
4
5
@supports (bottom: constant(safe-area-inset-bottom)) {
div {
margin-bottom: constant(safe-area-inset-bottom);
}
}

 

写在最后

以上几种方案仅供参考,笔者认为,现阶段适配处理起来是有点折腾,但是至少能解决,具体需要根据页面实际场景,在不影响用户体验与操作的大前提下不断尝试与探索,才能更完美的适配。

 

您可能感兴趣的相关文章
  • 精心挑选的美轮美奂的 jQuery 图片特效插件
  • 精心挑选的优秀jQuery Ajax分页插件和教程
  • 精心挑选的优秀 jQuery 文本特效插件和教程
  • 8款非常棒的响应式 jQuery 幻灯片插件推荐
  • 精心挑选12款优秀 jQuery 手风琴插件和教程

 

原文来自: 想要让H5网页适配 iPhoneX,就是这么简单

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

转载于:https://www.cnblogs.com/lhb25/p/h5-web-app-adapt-to-iphonex.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370271.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数字校园-云资源平台 2014.10.26-人人通共享空间

近期,教育部在统计学校信息化建设情况,当中一项重要内容,作为三通两平台的一个环节,就是学校开通人人通空间的情况,网上普及了一下知识,不就是十多年前就玩的学校博客的变种吗,网上有一些产品,也是没有热闹起来,为要求而要求的多,既然要求,就来一个吧,花了几天时间,也做了一个.…

Lucene –快速添加索引和搜索功能

什么是Lucene&#xff1f; Apache LuceneTM是完全用Java编写的高性能&#xff0c;功能齐全的文本搜索引擎库。 它是一项适用于几乎所有需要全文搜索的应用程序的技术&#xff0c;尤其是跨平台的应用程序。 Lucene可以纯文本&#xff0c;整数&#xff0c;索引PDF&#xff0c;Of…

《深入理解Java虚拟机》读书笔记3--垃圾回收算法

转载&#xff1a;http://blog.csdn.net/tjiyu/article/details/53983064 下面先来了解Java虚拟机垃圾回收的几种常见算法&#xff1a;标记-清除算法、复制算法、标记-整理算法、分代收集算法、火车算法&#xff0c;介绍它们的算法思路&#xff0c;有什么优点和缺点&#xff0c;…

Flex布局(一)flex-direction

采用Flex布局的元素&#xff0c;被称为Flex容器(flex container)&#xff0c;简称"容器"。其所有子元素自动成为容器成员&#xff0c;成为Flex项目(Flex item)&#xff0c;简称"项目" Flex-direction调整主轴方向&#xff08;默认为水平方向&#xff09;包…

登录网页后要弹出一个新标签_连永久链接都不会,还做什么新媒体?

上次给主编大大发的预览链接失效了&#xff0c;被骂得狗血淋头。大部分运营人可能都遇到过这种情况&#xff0c;忽视了预览生成的链接只是临时的&#xff0c;在12小时后或超过500阅读量后就会失效。一个疏忽&#xff0c;给自己带来了不必要的麻烦&#xff0c;耽误工作&#xff…

static_cast与dynamic_cast转换

static_cast与dynamic_cast转换   一 C语言中存在着两种类型转换&#xff1a; 隐式转换和显式转换 隐式转换&#xff1a;不同数据类型之间赋值和运算&#xff0c;函数调用传递参数……编译器完成 char ch;int i ch; 显示转换&#xff1a;在类型前增加 &#xff1a;&#xff…

vue使用iview Timeline 时间轴不显示问题

vue Timeline 时间轴不显示渲染的效果 官网代码 <Timeline pending><TimelineItem>发布1.0版本</TimelineItem><TimelineItem>发布2.0版本</TimelineItem><TimelineItem>发布3.0版本</TimelineItem><TimelineItem><a href…

Java EE 6 Web配置文件。 在云上。 简单。

Java SE还可以。 Java EE是邪恶的。 这就是我一直想的。 好吧&#xff0c;现在不再了。 让我分享我的经验。 几周前&#xff0c;我开始考虑将旧版spring hibernate tomcat应用程序移植到新平台上&#xff1a; SAP NetWeaver云 。 我知道您在极客那里的想法&#xff1a;…

Kubernetes核心概念总结

1、基础架构 1.1 Master Master节点上面主要由四个模块组成&#xff1a;APIServer、scheduler、controller manager、etcd。 APIServer。APIServer负责对外提供RESTful的Kubernetes API服务&#xff0c;它是系统管理指令的统一入口&#xff0c;任何对资源进行增删改查的操作都要…

php连接mysql数据,php连接mysql数据库

$sql_link mysql_connect("主机名","登入用户名","登入用户名密码");如果连接成功&#xff0c;就会返回一个mysql句柄,可以简单的理解成这个$sql_link 是php跟mysql的一个桥梁&#xff0c;通过该桥梁我们可以进入到mysql。进入到mysql之后&…

url存在宽字节跨站漏洞_利用WebSocket跨站劫持(CSWH)漏洞接管帐户

在一次漏洞悬赏活动中&#xff0c;我发现了一个使用WebSocket连接的应用&#xff0c;所以我检查了WebSocket URL&#xff0c;发现它很容易受到CSWH的攻击(WebSocket跨站劫持)有关CSWH的更多详细信息&#xff0c;可以访问以下链接了解https://www.christian-schneider.net/Cross…

php 数组对比 unset,如何区分PHP中unset,array_splice的区别

1.使用的函数a.函数unset()unset ( mixed $var , mixed $... ? ) : voidunset()销毁指定的变量。b.函数array_slice()array_splice(array,start,length,array)array表示数组。start表示删除元素的开始位置。length表示被移除的元素个数&#xff0c;也是被返回数组的长度。(可…

前端基础-CSS的各种选择器的特点以及CSS的三大特性

一、 基本选择器二、 后代选择器、子元素选择器三、 兄弟选择器四、 交集选择器与并集选择器五、 序列选择器六、 属性选择器七、 伪类选择器八、 伪元素选择器九、 CSS三大特性 一、 基本选择器 1、id选择器 #1、作用&#xff1a;根据指定的id名称&#xff0c;在当前界面中找…

使用JavaCV进行手和手指检测

这篇文章是Andrew Davison博士发布的有关自然用户界面&#xff08;NUI&#xff09;系列的一部分&#xff0c;内容涉及使用JavaCV从网络摄像头视频提要中检测手。 注意&#xff1a;可以从http://fivedots.coe.psu.ac.th/~ad/jg/nui055/下载本章的所有源代码。 第5章的彩色斑点检…

不能装载文档控件。请在检查浏览器的选项中检查浏览器的安全设置_【2020年网络安全宣传周】如何正确设置浏览器...

李夏是一个公司的职员&#xff0c;一天晚上加班赶制文档&#xff0c;由于要向客户汇报产品情况&#xff0c;需要获取大量网上信息&#xff0c;然而在制作中却发现浏览器的网页打不开了。第二天原计划向客户展示的材料未能完整汇总&#xff0c;客户见面对接效果也打了折扣。在当…

用装饰器设计模式装饰

装饰图案是广泛使用的结构图案之一。 此模式在运行时动态更改对象的功能&#xff0c;而不会影响对象的现有功能。 简而言之&#xff0c;此模式通过包装将附加功能添加到对象。 问题陈述&#xff1a; 想像一下我们有一个比萨饼&#xff0c;该比萨饼已经用番茄和奶酪烤制的情况。…

vcpkg安装_微软牌包管理器vcpkg更新及路线图计划

蝎子vcpkg是一套跨平台&#xff0c;开源的C/C库管理器&#xff0c;今天的这篇文章是有关vcpkg主题的2020年4月博文更新。在这篇文章中&#xff0c;我们将分享有关vcpkg 2020.04发布版本的一些信息以及vcpkg的路线图(roadmap)&#xff0c;我们会在这里持续地发布有关vcpkg的最新…

CSS 盒模型与box-sizing

一、盒模型 一个web页面由许多html元素组成&#xff0c;而每一个html元素都可以表示为一个矩形的盒子&#xff0c;CSS盒模型正是描述这些矩形盒子的存在。 MDN的描述&#xff1a; When laying out a document, the browsers rendering engine represents each element as a r…

Java课程设计 购物车系统(个人博客) 201521123052 蓝锦明

1. 团队课程设计博客链接 课程设计团队博客 2. 个人负责模块或任务说明 &#xff08;1&#xff09;制作图形菜单引导界面 &#xff08;2&#xff09;定义各获取和输出类函数 3. 自己的代码提交记录截图 4. 自己负责模块或任务详细说明 import java.text.NumberFormat; public c…

7-12(图) 社交网络图中结点的“重要性”计算(30 分)

在社交网络中&#xff0c;个人或单位&#xff08;结点&#xff09;之间通过某些关系&#xff08;边&#xff09;联系起来。他们受到这些关系的影响&#xff0c;这种影响可以理解为网络中相互连接的结点之间蔓延的一种相互作用&#xff0c;可以增强也可以减弱。而结点根据其所处…