vue x 兼容iphone_详解关于移动端兼容iPhoneX底部小黑条

场景

由于iPhoneX去掉了物理按键，改为了底部小黑条，这就会导致屏幕适配问题，最常见的场景就是底部fixed的元素被阻挡的情况。对于这种问题，我们一般采取css或js的处理方式(适用于h5，小程序)。

css适配方案(推荐)

第一步：设置网页的头部标签

viewport-fit：IOS11新增的特性，是为了iPhoneX而对meta标签做出的一个拓展属性。目前有三个值：

contain 可视窗口完全包含网页内容

cover：网页内容完全覆盖可视窗口

auto：默认值，跟 contain 表现一致

注意：适配的关键在于必须设置viewport-fit=cover

第二步：将页面主体设置在安全区域内

这一步视实际场景而定，可以不设置，带来的影响就是会出现底部区域的内容会被挡住；

body {

padding-bottom: constant(safe-area-inset-bottom);

padding-bottom: env(safe-area-inset-bottom);

}

env() 和 constant()是IOS11新增的css函数，有四个预定义的变量safe-area-inset-bottom、safe-area-inset-top、safe-area-inset-left、safe-area-inset-right，分别是安全区域到各边界的距离，此时我们只需要关心afe-area-inset-bottom(横竖屏的情况下是不一样的)。对于不支持这两个属性的情况，浏览器会忽略。

注意，constant()在IOS11.2之后是不可使用的，因此要向后兼容，即env()，且二者位置不可调换；

constant(): 兼容IOS < 11.2

env(): 兼容IOS >= 11.2

第三步：设置目标元素(fixed)的高度

对于目标元素，可设置bottom、padding-bottom、margin-bottom 均可：

.fixed {

bottom: constant(safe-area-inset-bottom);

bottom: env(safe-area-inset-bottom);

// 其余同

}

或者新增一个height = constant(safe-area-inset-bottom)空白区块亦可，方案多样。

JS适配方案

通过判断机型给底部fixed元素添加padding-bottom，或者新增个空白区块，此处不多余赘述。

function isIphoneX(){

return /iphone/gi.test(window.navigator.userAgent) &&

window.devicePixelRatio &&

window.devicePixelRatio === 3 &&

window.screen.width === 375 &&

window.screen.height === 812;

}

本文地址：https://blog.csdn.net/weixin_43989257/article/details/107304018

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！

vue x 兼容iphone_详解关于移动端兼容iPhoneX底部小黑条相关推荐

ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
加载vue文件步骤_vue中.vue文件解析步骤详解
这次给大家带来vue中.vue文件解析步骤详解,vue中.vue文件解析的注意事项有哪些,下面就是实战案例,一起来看一下. 我们平时写的 .vue 文件称为 SFC(Single File Compo ...
详解如何基于Arduino兼容板Teensy LC实现虚拟键盘与鼠标
目录前言硬件环境环境配置 1. 下载Teensy烧录程序 2 下载TeensyDuino 使用方法 1 模拟键盘 1.1 Keyboard库函数介绍: 1.2 Keyboard键码表: 1.3 ...
实例化vue发生了什么?(详解vue生命周期)
实例化vue发生了什么?(详解vue生命周期) 本文将对vue的生命周期进行详细的讲解,让你了解一个vue实例的诞生都经历了什么~ 我在Github上建立了一个存放vue笔记的仓库,以后会陆续更新一些 ...
vue中mint-ui使用详解
这次给大家带来vue中mint-ui使用详解,vue中mint-ui使用的注意事项有哪些,下面就是实战案例,一起来看一下. mint-ui在vue中的使用,供大家参考,具体内容如下首先放上mint- ...
vue基础扩展8--solt详解
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><title& ...
Vue路由传参详解（params 与 query）
Vue路由传参详解(params 与 query) 前言: 路由传参分为 params 传参与 query 传参 params 传参类似于网络请求中的 post 请求,params 传过去的参数不会显 ...
vue如何过滤html标签,Vue过滤器filters使用详解
这次给大家带来Vue过滤器filters使用详解,Vue过滤器filters使用的注意事项有哪些,下面就是实战案例,一起来看一下. 示例代码采用vue单文件组件,使用moment插件格式化日期 {{ ...
mixins php,vue的mixins属性详解
这篇文章主要介绍了vue的mixins属性详解,现在分享给大家,也给大家做个参考. 首先先给出官网 https://vuejs.org/v2/guide/mixins.html 今天在开发项目的时候要 ...

vue x 兼容iphone_详解关于移动端兼容iPhoneX底部小黑条

vue x 兼容iphone_详解关于移动端兼容iPhoneX底部小黑条相关推荐

最新文章

热门文章