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

引入

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

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

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

解决

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

env(safe-area-inset-bottom)

我们只需要在我们想要判断是否为安全区域的地方加上下面这段代码即可防止按键在安全区域     这里加50是为了更好的分开

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/386797.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【开源图床】使用Typora+PicGo+Gitee搭建个人博客图床

准备工作: 首先电脑得提前完成安装如下: 1. nodejs环境(node ,npm):【安装指南】nodejs下载、安装与配置详细教程 2. Picgo:【安装指南】图床神器之Picgo下载、安装与配置详细教程 3. Typora:【安装指南】markdown神器之Typora下载、安装与无限使用详细教…

nvm 安装nodejs教程【详细】

目录 一、安装nvm 二、配置镜像 三、安装nodejs 安装 查看正在用的nodejs版本 切换版本 一、安装nvm 双击安装包: 无脑下一步即可,当然你可以自定义你自己的安装目录。 安装完后,打开环境变量,你会发现nvm为我们自动配置好…

vue对于安装依赖时不好习惯的反省

因为一个不好的习惯,我总是喜欢–save去安装依赖包,然后发现最后打包后的内容总是很大。就想着怎么能让包小一些,就发现我遗漏了vue安装依赖的一个小知识点 安装依赖的时候可以-s -d -g去安装,要根据使用的内容选择去安装&#xf…

MYSQL学习笔记:MYSQL存储引擎

MYSQL学习笔记:MYSQL存储引擎 MYSQL是插件式的存储引擎 存储引擎影响数据的存储方式 存储引擎是用来干什么的,innodb和myisam的主要区别–数据存储方式----索引 mysql> show engines; ----------------------------------------------------------…

Linux_动静态库

动态库 静态库 刚开始学编程时,需要下载一个环境(vs2019),这个环境包括编译器和标准库,标准头文件。那么什么是库呢,库和头文件有什么关系呢? 头文件里面放的函数声明,库文件里面放…

python面向对象三大特性详解 - 封装 继承 多态

前言 面向对象编程有三大特性:封装、继承、多态,本文带大家来认识和了解这三个特性~ 补充 - 新式类 & 经典类 在python2.x中,新式类是继承了object类的子类,以及该子类的子类 子子类...;经典类就是没有继承没有…

新项目,从0到1,SpringBoot+Vue.js权限管理系统,拿去做毕设

大家好,我是 jonssonyan 最近把以前做的权限管理系统重新整理了一下(将一些不规范的地方规范了一下,并且在关键地方写了注释),代码全部开源,这个项目是以现在主流的前后端分离模式开发的,包含前…

二叉树基础总结

目录 树的定义: 深度和高度: 二叉树 由来 二叉树种类: 满二叉树: 完全二叉树: 严格二叉树(Strict Binary Tree): 平衡二叉树(Balanced Binary Tree)&…

Android ·移动应用开发 创建第一个Android项目

文章目录 一、创建第一个Android项目1.1 准备好Android Studio1.2 运行程序1.3 程序结构是什么app下的结构res - 子目录(所有图片、布局、字符串等资源)AndroidManifest.xml 有四大组件,程序添加权限声明 Project下的结构 二、开发android时&…

顾问聘请协议(模板)

甲方:________________   乙方:________________ 诚信合作是一切事业发展的基础,外部智力是企业进步的源泉。甲、乙双方经友好协商达成本协议,甲方愿意聘请乙方为特邀管理顾问,乙方愿按本协议内容与甲方合作。 一、合…

算法学习——LeetCode力扣二叉树篇8

算法学习——LeetCode力扣二叉树篇8 669. 修剪二叉搜索树 669. 修剪二叉搜索树 - 力扣(LeetCode) 描述 给你二叉搜索树的根节点 root ,同时给定最小边界low 和最大边界 high。通过修剪二叉搜索树,使得所有节点的值在[low, high…

Git中Idea操作git及Git Flow

目录 一、Idea中使用Git 1.idea配置Git和Gitee 2.实践操作 1.将本地项目推送到远程 2.从远程库克隆项目到本地 二、Git Flow 1.什么是Git Flow 2.工作流程 3.实践操作 一、Idea中使用Git 1.idea配置Git和Gitee 第一步:设置git.exe的安装路径 在设置中的…

[计算机提升] 备份系统:设置备份

6.5 备份系统:设置备份 1、进入到控制面板系统和安全\备份和还原,点击右侧的设置备份: 2、在弹出的设置备份对话框中,选择要保存的位置,点击下一步开始备份。 3、选择要备份的内容。根据需要选择即可。这种备份的…

计算机毕业设计springboot_vue房屋租赁系统_ku668

1.掌握Html,Css,JavaScript等基础编程语言。 2.掌握Vue框架,node环境,数据库等知识。 3.掌握开发系统的基本流程。 …

【原创 附源码】Flutter集成Apple支付详细流程(附源码)

最近有时间,特意整理了一下之前使用过的Flutter平台的海外支付,附源码及demo可供参考 这篇文章只记录Apple支付的详细流程,其他相关Flutter文章链接如下: 【原创 附源码】Flutter集成谷歌支付详细流程(附源码) 【原创 附源码】F…

爬虫——ajax和selenuim总结

为什么要写这个博客呢,这个代码前面其实都有,就是结束了。明天搞个qq登录,这个就结束了。 当然也会更新小说爬取,和百度翻译,百度小姐姐的爬取,的对比爬取。总结嘛!!!加…

VUE基础知识(JAVA后端入门篇)

VUE基础知识(JAVA后端入门篇) Vue是一套前端框架,免除原生JavaScriptr中的DOM操作,简化书写基于MVVM(Model–View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上Vue.js - 渐进式 JavaScrip…

JSP知识点

1、JSP概述 1.1 什么是JSP html java代码 JSP动态标签 jsp JavaServer page 在静态页面上添加动态信息就可以了,如果是Servlet还需要一行一行的输出。 通常在前台开发人员给出静态页面后,后台开发人员只需在静态页面中添加动态信息即可&#xff…

算法学习——LeetCode力扣回溯篇3

算法学习——LeetCode力扣回溯篇3 491. 非递减子序列 491. 非递减子序列 - 力扣(LeetCode) 描述 给你一个整数数组 nums ,找出并返回所有该数组中不同的递增子序列,递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。…

鸿蒙视频播放器,主要包括视频获取和视频播放功能:

鸿蒙视频播放器,主要包括视频获取和视频播放功能: 1 获取本地视频或者网络视频。 2 通过media.createAVPlayer创建播放器AVPlayer,然后进行视频播放。 3 通过VideoController进行AVPlayerState的状态管理,如开始,停止&…