vue x 兼容iphone_H5移动端适配IphoneX等机型
先来看下iPhone X机型的样子
上图中,Iphonex机型在头部和底部新增了这两个区域,所以我们需要针对这类机型做些适配,方便我们的webapp的展示
h5做成的移动端页面,常见布局为头部+躯干+底部三栏模式,头部和顶部都是固定定位,躯干可里的内容可以滚动,暂定的布局如下:
但如果没采用IphoneX机型的新的css属性,而直接采用position: fixed;top:0等常规写法,就会出现头部的导航栏被手机自带的状态栏(显示电量信号等等)遮挡的情况,底部的导航栏被IphoneX自带的呼吸灯(图中手机底部的白条)遮挡的情况,给用户的操作和体验带来困扰,目前针对这类问题,根据自己做过的项目,整理了一下几种解决方案
我使用的是vue框架,在index.html页面,我们需要添加
然后,在公共的app.vue页面,我们每个组件的展示,都是在这里被router-view替换,所以可以在这里处理一下公共的头部顶栏,具体的布局如下:
上面的布局中,我们给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写法,也需要略微改动下,头部组件页面布局如下:
导航内容
页面的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布局
底部内容
底部内容的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,审查元素,那样基本能解决大部分样式问题,关于真机调试,下回写
vue x 兼容iphone_H5移动端适配IphoneX等机型相关推荐
- vue x 兼容iphone_Html5移动端适配IphoneX等机型的方法
先来看下iPhone X机型的样子 上图中,Iphonex机型在头部和底部新增了这两个区域,所以我们需要针对这类机型做些适配,方便我们的webapp的展示 h5做成的移动端页面,常见布局为头部+躯干+ ...
- 在vue中使用flexible---移动端适配
在vue中使用flexible-移动端适配 配置 flexible 安装 lib-flexible 在命令行中运行如下安装: npm i lib-flexible --save 引入 lib-flex ...
- 浏览器兼容和移动端适配方案
1.浏览器兼容: 一.css兼容: 不同浏览器的标签默认的margin和padding不同 问题症状: 随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率: ...
- vue项目配置rem移动端适配
一.项目介绍 脚手架CLI:@vue/cli Vue版本:2.6.11 移动UI组件库:Vant#2.10.14 CSS预处理器:sass 二.配置lib-flexible插件 下载插件 npm i ...
- 移动端适配iphoneX、iPhone XS、iPhone XS Max、iPhone XR方法
使用mui框架的底部tab栏打包后在iphoneX.iPhone XS.iPhone XS Max.iPhone XR上展示出现问题,底部会被遮挡大半. 效果如下图: 解决方案:获取屏幕大小来写不同的 ...
- Vue CLI3 移动端适配 【px2rem 或 postcss-plugin-px2rem】
今天,我们使用Vue CLI3 做一个移动端适配 . 前言 首先确定你的项目是Vue CLI3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -S 2.在m ...
- cli3 px转rem适配移动端_Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
今天,我们使用vue cli3 做一个移动端适配 . 前言 首先确定你的项目是vue cli3版本以上的. 一.移动端适配包 1.安装移动端适配包 npm i lib-flexible -s 2.在 ...
- Vue笔记 (二) 如何做移动端适配 让你只用关心设计稿
一. 移动端基础知识 在移动端开发时,我们经常发现出现布局后有不兼容的问题,如何在不同设备上进行适配呢,希望康完这边,你能从原理到应用彻底熟悉移动端适配. 1.1 手机屏幕现状 移动端设备屏幕尺寸非常 ...
- 阿里手淘可伸缩布局方案amfe-flexible解决vue移动端适配问题
前言: 由于viewport单位得到众多浏览器的兼容,lib-flexible这个过渡方案已经可以放弃使用,不管是现在的版本还是以前的版本,都存有一定的问题.建议大家开始使用viewport来替代此方 ...
最新文章
- 为了读懂你,AI究竟有多努力?
- 来自51CTOHCNP3期一位技术小白的内心独白
- 大数据分析工资单:六大行员工再涨薪 人均年薪超26万
- 20145204 《Java程序设计》第6周学习总结
- 天线3db波束宽度_天线波束宽度计算公式
- 阿里云首发Dubbo3.0 + Nacos2.0
- 服务器应用缓存热点问题思考
- idea 2020版的Default Setting
- python适用于哪些芯片_用pyusb在Python中开发CY7C68013,利用,PyUSB,进行,芯片,的,上位,机...
- camera (19)---Android 相机开发的基本流程
- CSS技巧之数字美化为机械字体样式
- 笨办法学python3-笨办法学python3PDF
- dnastar拼接反向互补序列_反向互补、反向、互补序列有何区别?
- excel文件修复工具_Excel文件打开后出错,部分内容丢失的修复技巧
- 软件开发项目 衡量指标_不衡量开发人员—衡量项目
- 使用Python全栈打造淘宝客微信机器人!功能太强大了!
- openwrt安装GPS设备,使用GPSD获取GPS信息
- 阿里智能运维平台的演进:从自动化到无人化(附PPT)
- 【区块链开发指南】区块链基础之区块和交易
- 【量化策略】横盘策略20211209
热门文章
- [小样本图像分割]SG-One: Similarity Guidance Network for One-Shot Semantic Segmentation
- 叔本华人生的智慧-没有真正的需求,就没有真正的乐趣
- 高效记忆/形象记忆(08)英语单词记忆-字母熟词拆分
- Nacos配置中心yml做配置文件Could not resolve placeholder ‘xxx’ in value ‘${xxx}’问题解决
- 中控 c语言,「分享」C语言如何编写图形界面
- 用python开发一个背单词软件-python实现屏保程序(适用于背单词)
- proteus51仿真(3)——拨码开关
- MindNode for mac 思维导图
- 李炎恢讲师Xhtml全套课程
- 网络安全管理者要重点关注《数据安全法》的哪些内容