H5页面安全区域适配

已于 2022-03-31 16:39:31 修改
阅读量1.2k 收藏 2
点赞数
文章标签： html5 前端
于 2022-03-31 16:38:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ltogll/article/details/123876849
版权

css适配

方向非安全区空间距离
top

var(--immersive-area-inset-top, 0)

bottom

var(--immersive-area-inset-bottom, 0)

js适配

获取top和bottom非安全区空间距离，单位为vh

top：document.documentElement.style.getPropertyValue('--immersive-area-inset-top')

bottom: document.documentElement.style.getPropertyValue('--immersive-area-inset-bottom')

业务实践

低成本适配方案：JS获取__immersive_area_top高度，布局根容器根据该值决定是否向上移动__immersive_area_top，比如无值则不向上移动，有值则向上移动__immersive_area_top

ltog
关注
【前端UI】小程序&H5 适配iPhoneX/XS 安全区
baidu_29086999的博客
11-20 2134
【前端UI】小程序&H5 适配iPhoneX/XS 安全区 做一个严谨的页面还原稿 一、适配的含义 可视、可操作区域是在安全区域内。 没有做适配的情况： 二、安全区的含义 不被圆角、齐刘海、底部小黑条（Home Indicator）遮挡的长方形。 三、H5页面适配安全区 body { padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constan
h5适配底部安全区
岁月如歌去，十年弹指间
05-30 980
h5 在苹果浏览器中需要适配底部 如图按钮适配 .buttom { padding-bottom: 100rpx; padding-bottom: calc(100rpx + constant(safe-area-inset-bottom)); padding-bottom: calc(100rpx + env(safe-area-inset-bottom)); }
H5适配iOS顶部和底部安全区域
天问博客-专注于大前端技术
01-31 3248
在移动端Web开发中，适配不同设备的屏幕是一个重要且挑战性的任务。对于iOS设备来说，这一任务尤为关键，因为自iPhone X起，苹果的设备引入了刘海屏、圆角等设计，这就要求开发者在Web页面中特别处理顶部和底部的安全区域。本文将介绍如何在H5应用中适配iOS设备的顶部和底部安全区域，包括对旧版iOS的兼容处理。
【移动端适配二】H5移动端适配屏幕安全区（ios和android）
hzxOnlineOk的博客
11-29 6318
全面屏手机把整个webview（包括状态栏）给H5的话，不对状态栏进行控制往往会有以下如图问题出现，这样头部的返回按钮置于页面的安全区外，无法进行操作。
h5自定义组件适配 iphone/android 底部安全区
最新发布
超级婷
06-15 309
详细参考原文：https://huaweicloud.csdn.net/64e5c6c0c70554103b8e9bee.html?在 HTML 的 head 标签中添加 viewport meta 标签，以适配不同设备的屏幕大小，并启用安全区域填充模式。页面有底部按钮的话，且底部按钮用fixed或者absolute进行定位，小黑条会遮盖按钮。viewport-fit=cover 表示页面会填充整个屏幕，包含不同设备的安全区域。（重点是添加：viewport-fit=cover）
ios h5底部安全区适配
业余前端的职业经历
07-14 1952
相信在ios 移动端开发h5前端童鞋 肯定会知道 就是 很多ios款型的手机 底部有一条黑色的杠杠。然后在你的悬浮元素上面加一个 .safe-area 即可完成了 是不是很简单呢。或者白色哎 就是会遮挡一部分我们的元素 特别是底部需要悬浮一些按钮的时候。viewport-fit=cover 这玩意加到你的html头部。这个就是ios的底部安全区域 对应的还有顶部的哈。要用到ios上面专用一些css 函数和变量。关注我 持续更新 前端知识。
小程序以及H5页面上IphoneX底部安全区域小黑条适配问题
03-29
背景 公司项目开发中，发现iPhoneX上吸底元素存在被小黑条遮挡的问题 原因 在苹果 iPhoneX 、iPhone XR等机型上，物理Home键被取消，改为底部...也就是说，适配安全区域也就是让小程序或者H5的内容显示在绿色区域部分。
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
01-19
最近写小程序时，遇到了 iPhoneX 底部小黑线与内容重叠的问题，实际上是iPhoneX安全区域的适配问题，了解清楚这个问题花了挺多时间的，也实操出了结果，忍不住来总结总结。 前言 在苹果 iPhoneX 、iPhone XR等设备上...
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配 ...
03-29
在实际开发中，首先需要判断当前设备是否需要进行安全区域适配，这可以通过检查设备模型或使用`wx.getSystemInfoSync()`方法获取的`screenHeight`和`safeArea.bottom`属性来实现。例如，通过判断`model`属性中是否...
h5页面适配
07-09
综上所述，实现H5页面适配涉及到多个方面，包括但不限于媒体查询、响应式设计、视口设置、相对单位使用、图片和字体的适配，以及借助如`lib-flexible`这样的工具。在实际项目中，开发者需要综合运用这些技术，以确保...
iPhoneX安全区域与H5引发的问题(Safe Area)
01-03
iPhoneX安全区域引发的问题(Safe Area) 瞧一瞧 LeetCode题解：Gitbook版本传送门 前端笔记：Gitbook传送门 目录 什么是安全区域？ 预留出Home Indicator指示条 简单总结 一、什么是安全区域？ 最近正在开发小程序相关的需求时，遇到了一个问题——ios高版本的安全区域，即iPhoneX及以上拥有的“刘海儿”等可滑动区域会与你开发的内容重合。 幸运的是，在小程序上我们只需要考虑底部的底部Home Indicator上滑指示条。 注意，官方不推荐我们粗暴的将这段区域永久的覆盖，例如压黑边隐藏设备的圆角、刘海、指示条。 同样官方推荐避免将交互元素
h5底部留白，适配iphoneX安全区域
u011699848的博客
07-23 2167
参考文章: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-
前端开发进阶之H5移动端刘海屏适配
大道至简
12-19 6988
body { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);...
h5获取页面高度 ios 安卓端
woshenmew的博客
06-15 2206
# 安卓端 使用 uni.getSystemInfoSync().windowHeight 因为uni.getWindowInfo().windowHeight 高度有问题# 在web端# statusBarHeight 状态栏高度# windowBottom TabBar高度# windowTop 导航栏高度# safeArea.height 安全区域高度 （ios下方 返回按钮栏下方有个安全区域，防止误触home横线）...
移动端怎么适配顶部跟底部的安全区域
ZL_1618的博客
03-22 1276
移动端适配顶部底部的安全区域，是为了保证页面在 IOS 和 Android 系统下的显示效果和用户体验。通常来说，IOS 设备在页面顶部和底部都会预留出一定的安全区域，底部安全区域的高度和设备尺寸、系统版本等相关，一般在 34~44px 之间。而Android 设备在页面顶部通常不需要预留出安全区域，但在底部有导航栏时需要预留出相应的安全区域。在 HTML 的 head 标签中添加 viewport meta 标签，以适配不同设备的屏幕大小，并启用安全区域填充模式。其中，表示页面宽度等于设备宽度，
移动端安卓/苹果，tabbar安全区设置
qq_43610311的博客
11-17 1479
移动端安卓/苹果，tabbar安全区设置
h5移动端页面计算高度
weixin_47190975的博客
08-23 3045
h5移动端页面计算高度
小程序开发中的底部安全区域处理技巧
weixin_53156345的博客
11-17 1434
底部安全区域是指在一些全面屏手机上，由于硬件结构的限制，屏幕显示区域并非完全覆盖整个屏幕，因此底部会存在一个类似"刘海"的凹口。这一区域被称作底部安全区域，开发者需要特别处理才能确保页面内容不被遮挡。
h5页面适配手机流浪器
04-06
作为AI助手，我不确定“手机流浪器”是什么，但是我可以提供一些关于h5页面适配手机屏幕的建议。 1. 使用响应式设计：在设计h5页面时，应该考虑到不同屏幕尺寸的设备，使用响应式设计来适应不同的屏幕尺寸，确保...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值