js获取ios安全区域的高度

最新推荐文章于 2023-12-28 20:15:00 发布
最新推荐文章于 2023-12-28 20:15:00 发布
阅读量3.1k 收藏 1
点赞数 1
CC 4.0 BY-SA版权
文章标签： ios js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Root1216/article/details/128639784
文章介绍了如何在CSS中定义全局样式，特别是利用`:root`选择器设置环境变量`--sat`,`--sar`,`--sab`,`--sal`来表示iOS设备的安全区域。通过`getComputedStyle`方法获取这些变量的值，可以动态获取顶部控制栏和底部安全栏的高度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

    • 定义全局的css样式

:root {

--sat: env(safe-area-inset-top);

--sar: env(safe-area-inset-right);

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

--sal: env(safe-area-inset-left);

}

    • 通过dom获取对应iOS安全头部的高度

顶部控制栏：getComputedStyle(document.documentElement).getPropertyValue("--sat")

底部安全栏：getComputedStyle(document.documentElement).getPropertyValue("--sab")

RN获取iOS刘海屏除刘海外全屏高度以及安卓状态栏的StatusBar的设置
weixin_68658847的博客
05-07 458
RN获取iOS刘海屏除刘海外全屏高度以及安卓状态栏的StatusBar的设置
iOS13之后获取状态栏高度的方法
我叫柱子哥
06-03 2136
在 iOS 13 及以后，获取状态栏高度的方法有所变化，因为状态栏管理从转移到了的。
最全最准确获取iOS 状态栏、导航栏、TabBar高度
chenshilinaaa的博客
07-15 7250
最近在iPhone12系列机型上开发项目时，发现使用项目提供的获取状态栏、导航栏高度方法获取到的高度是错误的，随后跟踪排查最终解决这个问题，所以自己想简单的总结一下问题原因和解决办法。本文主要介绍问题原因和解决办法，最终提供一个能准确获取iPhone状态栏、导航栏、TabBar高度的方法。...
JS获取iOS iPhone安全区域SafeArea
weixin_37543822的博客
12-28 1498
苹果手机iPhone X及以上版本都带有刘海屏，14pro以上版本变成了所谓灵动岛，所以顶部和底部都有一个安全区域。 手机型号尺寸(pt)倍数屏幕(px)状态栏高度顶部安全距离底部安全距离 iPhone14Pro、iPhone15Pro、iPhone15 393 * 852 3 1179 * 2556 54pt 59pt 34pt(竖屏) / 21pt(横屏) iPhone14...
使用 javascript 获取浏览器（或 WKWebView）的安全区信息
weixin_34211761的博客
06-05 1202
safeAreaInsets 使用javascript获取安全区信息. 先决条件 WKWebview viewport-fit=cover 安装 NPM npm install safe-area-insets --save 复制代码UMD https://unpkg.com/safe-area-insets/out/umd/index.min.js 复制代码使用 引用 var safeAre...
获取顶部安全区高度
Han_SM的博客
09-01 355
顶部安全区
使用js获取移动端设备屏幕高度和宽度尺寸的方法
徊忆羽菲
08-13 8547
使用js获取移动端设备屏幕高度和宽度尺寸的方法 js获取移动端屏幕高度和宽度等设备尺寸，兼容性比较好的方法： document.documentElement.clientWidth; document.documentElement.clientHeight; 这段js代码得到的就是移动设备的可见宽高，比如iPhone 4s在微信内设置了viewport为1的时候为320416(手机480 - 微信状态栏64)，iPhone 5里为320504， 其他的计算方式兼容性均不好， document.docum
uniapp iOS安全距离高度
最新发布
06-09
### 在UniApp中获取和设置iOS设备的安全距离高度 在UniApp开发中，iOS设备的安全距离高度可以通过多种方式获取和设置。以下是详细的实现方法： #### 1. 获取状态栏高度 通过 `uni.getSystemInfoSync()` 方法可以...
ios h5获取键盘高度
03-14
核心逻辑在于检测到软键盘弹出后，页面可视区域高度会减少，从而可以通过对比原始视口高度与当前视口高度来推算出软键盘的实际高度。 ```javascript const updateKeyboardHeight = () => { const isIOS = /iPhone|...
uniapp获取顶部安全区高度
01-06
### 获取 UniApp 中顶部安全区域的高度 在 UniApp 开发过程中，为了确保应用界面能够良好适应不同设备的屏幕特性（比如带有刘海屏的 iPhone），开发者可以通过 `uni.getSystemInfoSync()` 方法来获取当前设备的安全...
获取屏幕的像素数,密度,状态栏的高度等
09-16
获取屏幕的像素数,密度,状态栏的高度等。其中获取屏幕实际的英寸数的方法不准确,还没有发现准确的方法。
如何用 js 获取虚拟键盘高度？（适用所有平台）
weixin_33953384的博客
08-16 4716
前言 这是一个存在很久的历史问题了，对于这样一个具有普遍性的问题浏览器偏偏没有给出解决方案，what？没有方案还聊个什么？ 别急，别急，接下来我们一起来扒一扒关于软键盘高度和 input 的问题 我们先来看一个短片认识一下这个问题 问题描述：当操作者进行输入操作的时候，弹起的软键盘把原本的输入框遮挡了，导致操作者看不到操作结果 以往的解...
获取状态栏高度
IT
06-11 928
public int getStatusHeight(Activity activity) { int statusHeight = 0; Rect localRect = new Rect(); activity.getWindow().getDecorView().getWindowVisibleDisplayFrame(localRect); statusHeight = local
iPhone X系列 的获取 - 安全区顶部和底部高度
weixin_33889665的博客
10-17 1万+
///1. 获得当前窗口 var JY_WINDOW: UIWindow? { get{ if let app = UIApplication.shared.delegate as? AppDelegate { return app.window } return nil } } //...
iPhoneX ‘安全区域’ 适配 技能get
haoyanyu_的博客
05-22 1472
献上一张iPhone X的布局图 绿色区为安全区域 通过viewport的属性 viewport-fit（ios的Safari还不支持） viewport-fit 是专门适配iPhone X之类的有刘海而且底部圆角的屏幕 viewport-fit有以下属性： viewport-fit : auto 该值不会影响初始布局视区，并且整个网页都可以查看。 viewport-fit : cov...
微信小程序、H5 （IOS 底部适配）safe-area-inset-bottom
吴冬雪的博客
03-07 5194
需要将viewport设置为cover，env和constant才能生效。因为现在的ios全面屏底部有小黑线，位于底部的元素会造成黑线的阻挡，可以使用。auto：默认值，此值不影响初始布局视图端口，并且整个web页面都是可查看的。tips: 记得先使用constant 再使用 env。在lang="stylus"中 前面需要加~contain：可视窗口完全包含网页内容。cover：网页内容完全覆盖可视窗口。
微信小程序底部安全区域高度获取
weixin_51293134的博客
09-22 2481
safe-area-inset-bottom 就是安全区的高度。
h5适配ios顶部和底部安全区域的问题
热门推荐
铁锤妹妹的博客
05-25 2万+
一. 前言： 苹果手机从iphoneX之后，屏幕顶部都有一个齐刘海，iPhoneX 取消了物理按键，改成底部小黑条，如果不做适配，这些地方就会被遮挡，所以本文记录一下齐刘海与底部小黑条的适配方法。 二. 知识点学习 1）viewport-fit iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值： contain: 可视窗口完全包含网页内容 cover：网页内容完全覆盖可视窗口 auto：默认值，跟 c
关于适配iphoneX以上机型底部小黑条的安全区域的问题
weixin_63929524的博客
05-08 4786
综上所述，使用CSS和JavaScript都可以对iPhoneX以上机型的底部小黑条的安全区域进行适配。具体选择哪种方式，可以根据项目需要和个人喜好来决定。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Root1216

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值