Html5移动端适配IphoneX等机型的方法


Posted in HTML / CSS onJune 25, 2019

先来看下iPhone X机型的样子

Html5移动端适配IphoneX等机型的方法

上图中,Iphonex机型在头部和底部新增了这两个区域,所以我们需要针对这类机型做些适配,方便我们的webapp的展示
h5做成的移动端页面,常见布局为头部+躯干+底部三栏模式,头部和顶部都是固定定位,躯干可里的内容可以滚动,暂定的布局如下:

<div class="page">
    <header></header>
    <main></main>
    <footer></footer>
  </div>

但如果没采用IphoneX机型的新的css属性,而直接采用position: fixed;top:0等常规写法,就会出现头部的导航栏被手机自带的状态栏(显示电量信号等等)遮挡的情况,底部的导航栏被IphoneX自带的呼吸灯(图中手机底部的白条)遮挡的情况,给用户的操作和体验带来困扰,目前针对这类问题,根据自己做过的项目,整理了一下几种解决方案
 

我使用的是vue框架,在index.html页面,我们需要添加

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

然后,在公共的app.vue页面,我们每个组件的展示,都是在这里被router-view替换,所以可以在这里处理一下公共的头部顶栏,具体的布局如下:

<template>
<div id="app">
<div class="placeholder_top" :style="{position:fixpositiona?'absolute':'fixed'}"></div>
<router-view  class="routerview"></router-view>
</div>
</template>

上面的布局中,我们给class为placeholder_top的div写下如下:

.placeholder_top {
  position: fixed;
  top: 0;
  left: 0;
  width: 10rem;
  background-color: #303030;
  height: constant(safe-area-inset-top);
  height: env(safe-area-inset-top);
  z-index: 999;
}

这样的话,我们后续,单独的组件,就不用再处理这个顶部栏的问题,那下面,我们就可以处理下前面提到的头部问题,一般头部,我们大多都会封装成公共组件,所以在这里,因为受到我们在app.vue页面插入的那个元素的影响,我们的头部的css写法,也需要略微改动下,头部组件页面布局如下:

<template>
<header>
    <div class="title" :style="{position:fixposition?'absolute':'fixed'}">
    导航内容
    </div>
    <div class="placeholder"></div>
    </header>
</template>

页面的css为:

header{
background-color: #303030;
    .title{
    position: fixed;
    top:0;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
    left: 0;
    height:88px;
    z-index: 999;
    }
    .placeholder{
    height: 88px;
    width: 10rem;
    }
}

这样写,这个头部导航栏就会位居于手机状态栏之下了,不会影响到视窗,并且能兼容安卓和ios机型(这类兼容问题,还涉及到ios的系统问题,不过本文暂未涉及)
 

下面再来看下main区域的处理,因为上面header组件已经处理好了,所以main直接如下布局:

main {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: calc(88px + constant(safe-area-inset-bottom));
padding-bottom: calc(88px + env(safe-area-inset-bottom));

ps:这里说明一下,下面的两行,是用在当前页面没有底部导航栏的情况

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
},

main里面布局好了,直接写内容就可以了,
 

然后在看下底部的footer布局

<template>
<footer>
    <div class="foot" :style="{position:fixposition?'absolute':'fixed'}">
    底部内容
    </div>
</footer>
</template>

底部内容的css如下:

footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 10rem;
    height: calc(88px + constant(safe-area-inset-bottom));
    height: calc(88px + env(safe-area-inset-bottom));
    background-color: #303030;
    .foot{
    position: absolute;
    top:0;
    left: 0;
    width: 10rem;
    height: 88px;
    }
}

这样写,底部导航foot里的内容,就不会被手机自带的呼吸灯所遮挡

所以可以总结一下,我们在这种webapp适配中,可能需要采用的css写法如下:
 

position: fixed;
    top: constant(safe-area-inset-top);
    top: env(safe-area-inset-top);
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    top: calc(1rem + constant(safe-area-inset-top));
    top: calc(1rem + env(safe-area-inset-top));
    bottom: calc(1rem + constant(safe-area-inset-bottom));
    bottom: calc(1rem + env(safe-area-inset-bottom));

ps:在上面的写法中,有写到:style="{position:fixposition?'absolute':'fixed'}",这个是为了解决用户点击输入框,弹出软键盘时,这类固定元素的定位不准的问题,感兴趣的可以研究下,本文暂不讨论
这里可以根据实际需求来采用不同的写法,大体布局逻辑建议不要偏差太大,这样写是为了统一处理,方便维护,另外如果有真机测试,发现布局兼容导致的样式问题,可以采用真机调试方法,用pc端浏览器调试webapp,审查元素,那样基本能解决大部分样式问题,关于真机调试,下回写

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

HTML / CSS 相关文章推荐
纯CSS3代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
详解CSS3开启硬件加速的使用和坑
Aug 21 HTML / CSS
CSS3教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
css3实现背景颜色渐变让图片不再是唯一的实现方式
Dec 18 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
CSS3下的渐变文字效果实现示例
Mar 02 HTML / CSS
纯css3实现思维导图样式示例
Nov 01 HTML / CSS
CSS3选择器新增问题的实现
Jan 21 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
详解CSS3浏览器兼容
Dec 24 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 #HTML / CSS
使用canvas一步步实现图片打码功能的方法
Jun 17 #HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 #HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 #HTML / CSS
使用html5 canvas绘制圆环动效
Jun 03 #HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 #HTML / CSS
H5最强接口之canvas实现动态图形功能
May 31 #HTML / CSS
You might like
PHP Class&amp;Object -- 解析PHP实现二叉树
2013/06/25 PHP
PHP中使用CURL模拟登录并获取数据实例
2014/07/01 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
js获取php变量的实现代码
2013/08/10 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
CSS3 media queries结合jQuery实现响应式导航
2016/09/30 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
详解AngularJS中$filter过滤器使用(自定义过滤器)
2017/02/04 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
微信小程序如何访问公众号文章
2019/07/08 Javascript
Python实现两个list对应元素相减操作示例
2017/06/09 Python
R语言 vs Python对比:数据分析哪家强?
2017/11/17 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
python之文件读取一行一行的方法
2018/07/12 Python
Python Unittest根据不同测试环境跳过用例的方法
2018/12/16 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
Python实现Appium端口检测与释放的实现
2020/12/31 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
Giglio英国站:意大利奢侈品购物网
2018/03/06 全球购物
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
计算机求职信
2014/07/02 职场文书
承诺函格式模板
2015/01/21 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
服务员岗位职责
2015/02/03 职场文书
资料员岗位职责范本
2015/04/13 职场文书
初中班主任心得体会
2016/01/07 职场文书