ios手机底部安全距离

已于 2023-03-24 11:04:59 修改
阅读量1k 收藏
点赞数
文章标签： css
于 2021-04-29 14:59:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stuios/article/details/116269297
版权 
//ios安全距离

height: calc(100%);

height: calc(100%  - constant(safe-area-inset-bottom));  //兼容ios<11.2

height: calc(100%  - env(safe-area-inset-bottom));  //兼容ios>=11.2

//可以解决ios 手机 底部安全距离遮挡元素的问题

星空下的蜗牛
关注
ios底部安全距离
杨晓风 迷迭香的记忆
03-05 7052
背景： 目前公司开发商城小程序，对于iOS要设置底部安全距离，否则底部会被黑条遮挡 技术方案： 1、苹果官方推荐：使用env()，constant()来适配，env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量： safe-area-inset-left：安全区域距离左边边界的距离 safe-area-inset-right：安全区域距离右边边界的距离 safe-area...
IOS底部安全距离适配问题
晴天有点孤单
07-13 859
ios兼容问题
兼容问题---ios底部的安全距离css设置
COCOLI_BK的博客
07-09 676
有一点要注意，在IOS11.2系统以前，可以使用constant()函数，但是在IOS11.2系统以后，这个函数就被废弃了，被env()函数替代了。2. 同时设置env和constant代码，同样env()和constant()需要同时存在，而且顺序不能换。1. 需要将viewport设置为cover，env和constant才能生效。这里不一定用padding-bottom可以是margin-bottom设置，具体看实际情况！采用viewport+env+constant方案。
IOS底部安全距离配置（uniapp）
weixin_72329752的博客
09-14 929
iPhone手机有的底部会出现安全距离，会在底部出现空白。
uniapp解决iOS底部安全距离
学而不思则罔
06-08 3043
【代码】uniapp解决iOS底部安全距离。
iOS灵活适配刘海屏手机的顶部状态栏高度和底部安全距离
热门推荐
jayson_hk的博客
12-09 1万+
我们知道在刘海屏手机出来之前，iOS App的顶部状态栏高度为20pt，导航栏的可布局区域高度为44pt，整个导航栏高度为64pt，底部安全距离为0。 在刘海屏手机出来后，刘海屏机型iOS App的顶部状态栏高度为44pt，导航栏的可布局区域高度为44pt，整个导航栏高度为88pt，底部安全距离为34pt。 我们除了要考虑手机在正常状态下的适配以外，还要考虑通话、定位、录屏状态下时，因为顶部还会多...
vue h5页面获取ios手机 顶部底部安全距离高度
最新发布
09-11
在iOS环境下，为了获得H5页面顶部和底部的安全距离（即导航栏和 tabBar 的高度），你可以通过JavaScript或者使用一些第三方库来实现。这通常涉及到检测设备平台并针对iOS进行特定处理。 一种常见的方法是在Vue的`...
微信小程序 ---- iPhone X 以上机型留出底部安全距离
m0_56860190的博客
03-10 1642
小程序自适应底部距离
iOS新版微信底部工具栏遮挡问题完美解决
01-03
苹果设备（iOS）微信中打开H5页面，从首页跳转到其他页面后，页面的底部会出现一个带有前进和后退按钮工具栏，而该工具栏会遮挡住面底部的内容，影响页面的正常使用。 二、原因分析： 造成该现象的原因是，当页面...
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
01-19
最近写小程序时，遇到了 iPhoneX 底部小黑线与内容重叠的问题，实际上是iPhoneX安全区域的适配问题，了解清楚这个问题花了挺多时间的，也实操出了结果，忍不住来总结总结。 前言 在苹果 iPhoneX 、iPhone XR等设备上...
移动端H5-iPhone安全距离适配
TeroZhang的博客
12-27 2423
安全区域？ 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域： 也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。 更详细说明，参考文档：Human Interface Guidelines - iPhoneX viewport-fit iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可
屏幕底部安全距离(工具栏底部距离屏幕底部的距离通过safeAreaInsets获取)
zhanglizhi111的博客
09-20 2205
CGFloat safeNum = 0; //判断版本 if (@available(iOS 11.0, *)) { //通过系统方法keyWindow来获取safeAreaInsets UIEdgeInsets safeArea = [[UIApplication sharedApplication] keyWindow].safeAre...
iOS小技能：适配安全区域距离(safeAreaInsets)
iOS逆向与安全
08-08 2216
使用自动布局，和使用API获取高度。
移动端ios底部安全距离
weixin_43072770的博客
11-09 1674
移动端ios底部安全距离 在index.html文件内添加 <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover,user-scalable=no"> 需要添加样式的位置添加上 padding-bottom:constant(safe-area-inset-bottom); padding-bottom:env(safe-area-inset-bottom); ...
关于适配iphoneX以上机型底部小黑条的安全区域的问题
weixin_63929524的博客
05-08 4204
综上所述，使用CSS和JavaScript都可以对iPhoneX以上机型的底部小黑条的安全区域进行适配。具体选择哪种方式，可以根据项目需要和个人喜好来决定。
小程序开发 uni-app 获取底部安全区域适配苹果底部黑条及IOS系统的坑
weixin_49098968的博客
04-09 6617
在小程序的开发中，需要适配不同机型的安卓和苹果，此文章讲解在适配苹果IOS系统踩过的坑。
IOS安全区域适配
EmotionComputer
02-17 6764
iOS安全区域适配
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值