uniapp前端手机获取安全区域css值防止按键不能被点击

9月前作者：zhuyua 分类：Toy博客阅读(33) 违法举报

这篇具有很好参考价值的文章主要介绍了uniapp前端手机获取安全区域css值防止按键不能被点击。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

引入

再编写小程序和移动端的时候可能会出现这种情况，页面中的按键刚好才手机中按不到的位置如下

这是苹果手机的home按键如果刚好我们的按钮再这个位置,用户是点击不到的

我们就需要一个办法,能够自动的让我们的按键移动到安全可点击的区域

uniapp前端手机获取安全区域css值防止按键不能被点击,前端,css

解决

我们可以使用如下的值来获取

env(safe-area-inset-bottom)

我们只需要在我们想要判断是否为安全区域的地方加上下面这段代码即可防止按键在安全区域这里加50是为了更好的分开文章来源地址https://www.toymoban.com/news/detail-825884.html

padding-bottom:calc(env(safe-area-inset-bottom) + 50rpx);

到了这里，关于uniapp前端手机获取安全区域css值防止按键不能被点击的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

在uniapp中获取可视区域的高度（uni.getSystemInfo）

在实际开发中我们会遇到不确定高度的情况，那么在uniapp中我们如何获取区域的高度呐？一起来看看吧使用到的： uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息 uni.getSystemInfo(OBJECT) 异步获取系统信息 OBJECT 参数说明：参数名类型必填说明 s

2024年02月02日
浏览(36)
Android手机底部安全区域问题

这个问题主要体在全面屏手机上，统称为安全区域直接上图（不知道怎么调正，😓）这个问题刚开始困扰了我好久，但是去看抖音发现它底部也是有安全区域的，才知道在Android上是无法完全消除的 (第二种的方法是可以消除掉的，但是会影响用户体验) 而抖音也该也是采用

2024年02月09日
浏览(35)
前端安全系列（一）：如何防止XSS攻击？

随着互联网的高速发展，信息安全问题已经成为企业最为关注的焦点之一，而前端又是引发企业安全问题的高危据点。在移动互联网时代，前端人员除了传统的 XSS、CSRF 等安全问题之外，又时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。当然，浏览器自身也在不断在

2024年02月02日
浏览(65)
前端:运用html+css+js模仿京东上商品图片区域放大特效

1. 前言最近在网页端浏览京东上的商品时，觉得上面的那张gif图片上实现的特效不错，于是自己打算使用html+css+js技术来实现一下上述特效效果，我的实效果如下： 2. 前端界面主要使用到浮动、绝对定位、相对定位等知识，不了解这部分知识点的读者可以先去了解了解，再

2024年02月16日
浏览(53)
uniapp中ios底部安全区域问题

1、App：在manifest.json源码视图中找到app-plus，添加safearea配置 2、给page设置CSS 3、找到template.h5.html文件，给meta添加viewport-fit=cover

2024年02月11日
浏览(38)
css 安全区域 safe-area-inset-

安全区域与边界是iOS11 新增特性。安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响。 Webkit 为此增加了相应的CSS 函数，用于获取安全区域边界值。安全区域边界有4个预定义变量： safe-area-inset-left：安全区域距离左边边界距离 safe-area

2023年04月20日
浏览(39)
图形界面科学计算器功能：用户界面模拟真实计算器（具体可参考手机计算器APP），显示0~9按键、+、-、*、/运算符和小数点、=、（），按下对应按键，算式区域（可用Label组件）显示用户输入的内容，

图形界面科学计算器功能：用户界面模拟真实计算器（具体可参考手机计算器APP），显示0~9按键、+、-、*、/运算符和小数点、=、（），按下对应按键，算式区域（可用Label组件）显示用户输入的内容，按等号，计算结果并显示。要求： 1.采用图形用户界面 2.正常输入算式，

2024年02月03日
浏览(50)
uniapp开发小程序，设置iphone底部安全区域

上面dom结构的，根据需求是这样的：整个屏幕被两个view占满，其中底部view是固定在底部不动的，content内容立马是高度盛满剩下屏幕高度，并且overflow：scorll ； safeArea里面的动态样式中的safeAreaBottom是vuex保存的值，后面加的114，是底部高度再略高一点：“100+14” ，其中14你给

2024年02月12日
浏览(55)
CSS_IOS适配状态栏和IOS底部安全区域

计算属性先constant再env 计算属性 safe-area-inset-left: 安全区域距离左边界的距离 safe-area-inset-right: 安全区域距离右边界的距离 safe-area-inset-top: 安全区域距离顶部边界的距离 safe-area-inset-bottom: 安全区域距离底部边界的距离

2024年02月10日
浏览(38)
学习前端安全：防止常见的Web攻击和漏洞：简单而有效

作者：禅与计算机程序设计艺术安全是所有Web开发人员都需要关注的一个重要方面，因为信息在网络上传输时都存在各种隐患。攻击者利用这些隐患对我们的网站造成破坏，甚至导致服务器被入侵。因此，在Web开发过程中，我们需要对安全问题保持警惕并采取必要的措施保障

2024年02月11日
浏览(47)