h5底部留白，适配iphoneX安全区域

参考文章:https://developer.mozilla.org/zh-CN/docs/Web/CSS/env

在meta标签中设置viewport-fit=cover

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

css中可以通过safe-area-inset-top、safe-area-inset-left、safe-area-inset-right、safe-area-inset-bottom获取四个方向的安全区域，适配底部则需要用到safe-area-inset-bottom
需要使用env()函数取值

.body {padding-bottom: 0; /* 兜底方案 */padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

注意：constant()是IOS11.2之前的适配版本，11.2以上已经不再支持

如果页面已经设置过内边距，可以使用calc()函数搞定

.body {padding-bottom: 1.36rem;padding-bottom: calc(1.36rem + constant(safe-area-inset-bottom));padding-bottom: calc(1.36rem + env(safe-area-inset-bottom));
}

env()可以写第二个参数，如果环境变量不可用，该参数可让您设置备用值

.body {padding-bottom: env(safe-area-inset-bottom, .22rem);
}

h5底部留白，适配iphoneX安全区域相关推荐

html5苹果x底部满屏,iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配...
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 前言在苹果 iPho ...
vuevant移动端h5底部留白问题
不知道是,vue的原因还是vant的原因,html底部多了一截. 每个页面背景不一样也不能给统一的background,给内容div负margin都盖不住这个html的空白. 最后试了很多方法,曲线救 ...
移动端 iPhoneX安全区域小程序、H5页面适配
文章目录 1. 安全区域 2. 微信小程序适配iPhoneX底部保护边缘 3. H5适配iPhoneX安全区域 3.1:设置网页在可视窗口的布局方式 3.2 设置安全区域边距仅考虑竖屏的设置考虑横 ...
钉钉应用中H5开发适配iphonex
钉钉容器中开发H5应用时适配iphonex 首先要了解iphonex屏幕尺寸的一些知识,可以参考H5页面WebView在Iphonex的适配,有了对iphonex屏幕的基本认识后,适配就相对简单一些了 ...
H5｜小程序｜RN页面适配iphoneX【异形屏幕｜底部安全区域】
需求场景: H5页面有一个吸底的按钮,但是异形屏幕[iPhonex等],按钮一大半会被系统的小黑条挡住.需要适配在异形屏幕下,完整展示按钮,不被遮挡. 查了一些资料,发现为了应对刘海屏幕,苹果也给出了 ...
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结. 本文目录前言 ...
H5页面页面在iphoneX手机上底部会有留白解决办法
H5页面页面在iphoneX手机上底部会有留白解决办法在meta viewport标签里加属性:viewport-fit=cover:如下 <meta name="viewport& ...
H5网页适配 iPhoneX，就是这么简单
iPhoneX 取消了物理按键,改成底部小黑条,这一改动导致网页出现了比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可( ...
H5页面适配 iPhoneX
过去,我们拿到的手机是方方正正的矩形,所以整个屏幕都可以看做是安全区域 Safe Area,而如今由于 iPhone X 及以上机型,屏幕上的"刘海"以及屏幕四周采用圆角的设计,对 ...

h5底部留白，适配iphoneX安全区域

h5底部留白，适配iphoneX安全区域相关推荐

最新文章

热门文章