一、使用背景

苹果官方推荐：使用env()，constant()来适配，env()和constant()，是IOS11新增特性，用于设定安全区域与边界的距离

safe-area-inset-left：安全区域距离左边边界的距离

safe-area-inset-right：安全区域距离右边边界的距离

safe-area-inset-top：安全区域距离顶部边界的距离

safe-area-inset-bottom ：安全距离底部边界的距离

二、使用前提：

1、网页需设置viewport-fit=cover

2、小程序viewport-fit默认是cover

3、IOS11.2之前使用constant()函数，IOS11.2之后使用env()

4、注意：env()和constant()需要同时存在，且constant()在前

三、使用方法：

padding-bottom: constant(safe-area-inset-bottom);  /*兼容 IOS>11.2*/

padding-bottom: env(safe-area-inset-bottom);  /*兼容 IOS>11.2*/

ios底部安全距离的更多相关文章

  1. ios 底部用定位 fixed。在软件盘出来后，页面元素被顶上去一部分，fixed定位的footer也跑到了上面去。解决方法

    ios 底部用定位 fixed.在软件盘出来后,页面元素被顶上去一部分,fixed定位的footer也跑到了上面去.解决方法 $("input").focus(function() ...

  2. 仿iOS底部弹出popUpWindow

    上面为弹出来的效果 popUpWindow布局: <?xml version="1.0" encoding="utf-8"?> <Linear ...

  3. Android仿IOS底部弹出选择菜单ActionSheet

    使用Dialog的实现方式,解决原ActionSheet使用Fragment实现而出现的部分手机取消按钮被遮盖的问题 java部分代码: import android.app.Dialog; impo ...

  4. RDVTabBarController--可自由定制的iOS底部导航控件

    RDVTabBarController:一个十分完善的tabBarController,可以自定义角标个数,爽的停不下来. RDVTabBarController地址:RDVTabBarControl ...

  5. Android仿ios底部弹出框效果

    准备: public class ActionSheet { public interface OnActionSheetSelected { void onClick(int whichButton ...

  6. 移动端底部fixed固定定位输入框ios下不兼容

    简短记录下最近开发移动端项目碰到的小坑,产品需求做一个售后对话页面,底部固定输入框,和微信对话差不多,但是在ios下,fixed失效,输入框被虚拟键盘挡住,在安卓下是正常的. 尝试过网上说的很多方法, ...

  7. ios 动画：底部标签栏的概念设计

    本文汇集了大量优秀的ios底部标签栏动效设计,并附上技术实现的指南,对于设计师和开发者都提供了很好的灵感来源和学习资源. 我们每天都见到tab bars,它们指引用户,使得他们能够快速在不同的tab中 ...

  8. 我的小前端 （1）—— 安卓机和ios机的区别

    没有什么特别新技术,就是记录我做移动端遇到的问题 2016-02-16 微信,支付宝和APP都会遇到这些问题 一.安卓机和ios机的区别 1.常用 <head>        <me ...

  9. ios 日常开发常用宏定义

      #pragma mark - 字体.颜色相关 #define kFONT_SIZE(f) [UIFont systemFontOfSize:(f)] #define kFONT_BOLD_SIZE ...

  10. 你的旧版本 App 为何运行在 iPhone 12 上没有异常？

    背景 当我在 10月14日 iPhone 12 系列发布直播,看到 iPhone 12 系列的分辨率后,我注意到这些分辨率是全新的时,我立即在群里吐槽:又需要适配一波了.我只是以为宽高变化会导致字号变 ...

随机推荐

  1. 思科IPsecVPN建立

    实验拓扑 实验目标: 1.不配置中间的三个路由器的路由实现router0和router2的vpn隧道 2.PC0能够ping通PC1 实验IP预定: PC0 10.1.1.1/24 PC1 20.1. ...

  2. https原理（二）服务端公钥有没有被CA私钥加密

    https://www.dianjilingqu.com/387084.html 在https原理中,一大争议就是服务端是否用CA私钥加密服务器公钥 是-自签名证书浏览器没有CA公钥,无法解密公钥,而 ...

  3. kotlin channel使用注意点

    kotlinx.coroutines.channels.ClosedSendChannelException: Channel was closed at kotlinx.coroutines.cha ...

  4. 火爆全球的“饺子皮”3D手办原来是这样做的！关键时刻少不了远程控制软件！

    2022年卡塔尔世界杯的吉祥物最近在全球火出圈了,并且喜提中国网友给予的爱称"饺子皮"."馄饨皮"(官方名字:拉伊卜,意为"技艺高超的球员" ...

  5. keypress和keydown的区别

    keypress不识别功能键,比如ctrl,alt,shift,上下左右.keypress返回的ascII码区分大小写.输入小写a返回97,输入大写A返回65. keydown识别.keydown返回 ...

  6. P8201 [传智杯 #4 决赛] [yLOI2021] 生活在树上（hard version）

    个人思路: 首先,题目可以转化为是否存在 \(a,b\) 路径上一点 \(u\),满足 \(w_u = dis{1,a} \oplus dis{1,b} \oplus w_{lca(a,b)} \op ...

  7. leetcode 98. 验证二叉搜索树 【一遍dfs】【时间击败99.72%】【内存击败94.23%】

    复用left[],[时间击败73.33%]-->[时间击败99.72%] [内存击败36.17%]-->[内存击败94.23%] dfs(r)返回值=new long[]{包括r节点的子树 ...

  8. python 本地l离线安装whl文件

    记录下无网络时安装Python环境 一: 单独下载文件 1.下载whl离线文件到本地,放到c盘根目录(任意位置均可,只是方便安装) https://pypi.org/ https://www.lfd. ...

  9. Oracle 临时表空间暴满的原因与解决方法

    Oracle临时表空间主要用来做查询和存放一些缓冲区数据.临时表空间消耗的主要原因是需要对查询的中间结果进行排序. 重启数据库可以释放临时表空间,如果不能重启实例,而一直保持问题sql语句的执行,te ...

  10. 2022-4-8内部群每日三题-清辉PMP

    1.在创建最小可行产品(MVP)时,哪种方法至关重要? A.冒烟测试. B.演示. C.按版本发布. D.客户访谈. 2.敏捷项目团队决定修改使用中的测试过程,这一决定在哪一次会议上产生的? A.sp ...