网页使用safe-area-inset-bottom不生效解决办法,适用h5，小程序webview

原创 已于 2025-01-20 10:08:55 修改 · 637 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #小程序 #javascript

于 2024-12-18 16:29:25 首次发布

在html中添加viewport-fit=cover即可生效，代码如下

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

肖老师xy
关注
小程序|H5|WeChat利用safe-area-inset-*兼容iPhoneX安全距离
Jack, what else can you do besides holding your little darling?
01-06 715
小程序|H5|WeChat利用safe-area-inset-*兼容iPhoneX安全距离
iPhoneX 安全区域 safe-area-inset-*样式不生效
Stavin Li的博客
08-26 7231
iPhoneX 安全区域 safe-area-inset-*样式不生效 解决办法： 添加 meta name="viewport" 中增加viewport-fit=cover内容 <meta name="viewport" id="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover"> ...
iPhoneX安全区域与H5引发的问题(Safe Area)
余光的博客
04-09 7800
iPhoneX安全区域引发的问题(Safe Area) 瞧一瞧 LeetCode题解：Gitbook版本传送门 前端笔记：Gitbook传送门 目录 什么是安全区域？ 预留出Home Indicator指示条 简单总结 一、什么是安全区域？ 最近正在开发小程序相关的需求时，遇到了一个问题——ios高版本的安全区域，即iPhoneX及以上拥有的“刘海儿”等可滑动区域会与你开发的内容重合。...
关于 uniapp 设置 safe-area-inset-bottom 本地正常，体验版不生效问题
qq_60876952的博客
05-15 431
来进行适配，但使用时必须 constant 放在 env 方法的前面，否则可能会出现开发者工具正常，上传至体验版不生效的问题。uniapp 设配ios底部安全距离时常用。
关于env(safe-area-inset-bottom)的兼容问题
热门推荐
anwebDesigner的博客
09-21 1万+
env(safe-area-inset-bottom)兼容性问题，避坑指南。
网页适配问题与解决方案
YANNINGXINYI的博客
06-08 2237
网页适配 iPhoneX，就是这么简单 淡逝奈成风吟 2020-06-08 19:19:44 前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图：
css适配刘海屏手机
肖肖肖丽珠的博客
07-02 1417
刘海屏的手机会出现的问题。 底部的内容太靠底部边了有的可能还会被截断。底部是固定的fixed定位bottom：0 我们可以在最下面这个元素的外层加个样式 padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ 注意：env() 跟 constant() 需要同时存在，而..
uniapp 开发H5中适配底部安全区域不生效的解决方法
inticaler的博客
04-23 3583
uniapp 开发H5中适配底部安全区域不生效的解决方法
Vant 3.* 底部安全区适配 部分页面不生效
sinat_31327113的博客
10-12 3215
底部安全区适配 // index.html 增加 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> // 全局样式增加 @supports(bottom:env(safe-area-inset-bottom)){ #app{ padding-bottom: co
小程序IOS安全区域优化safe-area-inset-bottom
JavaScritp
02-10 684
【TOC】
H5页面适配 iPhoneX
xyj1151880359的博客
06-08 589
H5页面适配 iPhoneX iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。 笔者通过查阅了一些官方文档，以及结合实际项目中的一些处理经验，整理了一套简单的适配方案分享给大家，希望对大家有所帮助，以下是处理前后效果图： 关于适配的几个知识点 1、安全区域（Safe area ） 确保不会
Uni-app 笔记二 (项目笔记)
u014105655的博客
01-29 1010
Uniapp 项目 笔记
《safe-area-inset-bottom之兼容问题》
杨晓风 迷迭香的记忆
06-01 4767
背景 身为技术开发，每天惊喜不断。收到业务方反馈，定位为商城的小程序在个别机型上出现结算条不显示的情况。这个bug处于收益喉咙的位置，zhuo's
vant NavBar safe-area-inset-top 一加手机失效问题
w140130w的博客
09-04 1569
APP内嵌H5活动页, 需要实现沉浸式效果，因此APP客户端打开H5页面的时候需要开启webview全屏设置，开启之后，页面顶部会遮盖状态栏，但Vant 提供的NavBar导航栏提供了适配顶部安全区域的解决方案，就是使用safe-area-inset-top，但是出现了两个问题；解决方案：需要针对安卓手机，让客户端在打开H5之前在localstorage存储安全区域的值，自定义变量--safe-area-inset-top，并请将其放在根元素上，vant会自动获取该变量的值。问题一： IOS手机不支持。
vue页面样式在微信中不生效
你不追逐时代，时代就会反噬你，我是风尚，一个有趣的灵魂
01-23 1188
有几个可能的原因导致你的Vue页面样式在微信中不生效：缓存问题：微信客户端可能会缓存页面的样式文件。你可以尝试在开发环境下清除缓存，或者在部署时给样式文件添加一个版本号，强制客户端重新加载最新的样式。兼容性问题：微信内置浏览器可能对某些CSS属性或特性的支持不完整。你可以在代码中使用兼容性前缀或者尝试使用其他方式实现相同的效果。CSS选择器的问题：在Vue中，组件的样式可能会受到父组件样式的影响。你可以使用属性来为组件的样式添加作用域，或者使用更具体的CSS选择器来避免样式冲突。样式文件路径问题：检查一下你
Android webview 69,android-9.0-pie-env(safe-area-inset-top)无法在Android Pie WebView 69上运行
weixin_35562134的博客
05-26 1088
在Chrome 69中引入了对env()常量的支持.虽然我观察到的行为与iOS不同.在iPhone 8屏幕上没有凹口env(安全区域插入顶部)等于20px,而在Moto G屏幕上,没有凹口,它等于0.作为一种解决方法,我正在使用此函数在页面加载时将类设置为正文：/*** Android save-area env variables behave differently from iOS ones...
小程序webview嵌入h5兼容iphone安全区域
weixin_48226213的博客
04-05 2559
在苹果 iPhoneX及以上设备上，可以看到物理Home键被取消，改为底部小黑条替代home键功能。微信小程序和 h5 网页需要针对这种情况进行适配，否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况，原生APP和小程序和H5都可以使用苹果官方推出适配方案css函数env()、constant()来适配。但是嵌入微信小程序webview中的h5网页使用env()、constant()是不生效的，需要在顶层的h5应用做兼容处理。 1.在webview加入padding-bottom，或者调整webview高
safe-area-inset-bottom 不生效
最新发布
08-17
### uniapp 小程序 safe-area-inset-bottom 不生效的解决方案 在 UniApp 小程序中，`safe-area-inset-bottom` 不生效的问题通常出现在 iOS 设备上，尤其是全面屏设备（如 iPhone X 及以后机型）。该问题的核心在于如何正确使用 `env()` 和 `constant()` 函数，并确保样式作用范围和平台特性适配。 #### 1. 确保使用正确的 CSS 函数 iOS 11 及以上版本支持 `env()` 和 `constant()` 函数，用于获取安全区域的边距值。在实际开发中，推荐优先使用 `env()`，因为 `constant()` 在未来的 iOS 版本中可能会被弃用。若需兼容 iOS 11.2 以下版本，可同时保留两者： ```css .ios-safe-area-bottom { padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ } ``` 如果需要在安全区域基础上增加额外的内边距（如 16rpx），可以结合 `calc()` 函数进行计算： ```css .ios-safe-area-bottom { padding-bottom: calc(16rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */ padding-bottom: calc(16rpx + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */ } ``` #### 2. 检查样式是否被覆盖或未正确应用 `safe-area-inset-bottom` 样式可能因样式优先级或选择器问题而未生效。确保目标元素的样式没有被其他 CSS 规则覆盖。可以使用 `!important` 提高优先级： ```css .ios-safe-area-bottom { padding-bottom: env(safe-area-inset-bottom) !important; } ``` 此外，应确保样式作用于正确的元素。例如，底部操作栏应包裹在一个具有适配样式的容器中： ```vue <template> <view class="container"> <!-- 页面内容 --> <view class="content"> <!-- 页面主体内容 --> </view> <!-- 底部操作栏 --> <view class="bottom-bar ios-safe-area-bottom"> <!-- 底部内容 --> </view> </view> </template> ``` #### 3. 使用条件编译区分平台 UniApp 支持条件编译功能，可以针对 iOS 平台单独设置样式。例如： ```scss /* #ifdef APP-PLUS */ .ios-safe-area-bottom { padding-bottom: env(safe-area-inset-bottom); } /* #endif */ ``` 该方式可确保样式仅在 iOS 设备上生效，避免影响其他平台的布局。 #### 4. 验证 `viewport-fit` 设置 在 H5 页面中，`env()` 和 `constant()` 的生效依赖于 `viewport-fit=cover` 的设置。而在 UniApp 小程序中，`viewport-fit` 默认为 `cover`，因此无需额外配置。如果手动修改过 `viewport-fit`，请确保其值为 `cover` 以启用安全区域特性[^2]。 #### 5. 使用 `@supports` 检测特性支持 为了确保样式仅在支持 `safe-area-inset-bottom` 的环境中生效，可结合 `@supports` 进行检测： ```css @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { .ios-safe-area-bottom { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } } ``` 该方式可避免样式在不支持的环境中错误应用。 #### 6. 调试与测试 在调试过程中，建议使用真机测试，尤其是全面屏设备。可通过以下方式验证安全区域是否生效： - **检查元素样式**：在调试工具中查看目标元素的计算样式，确认 `padding-bottom` 是否包含 `safe-area-inset-bottom` 的值。 - **对比不同设备**：在不同型号的 iOS 设备上测试，确保样式适配效果一致。 ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值