一、使用背景

苹果官方推荐：使用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. Rust字符串处理

    Trim移除字符串开始末尾的字符串 fn main() { let s = " Hello Rust! "; // trim移除字符串开始末尾的空格 // "Hello ...

  2. csec的key更新

    在对csec的使用中(其他遵循hsm key update协议的芯片也适用),kdf的运算过程中遇到的数据都是128bit.不需要考虑padding的问题.目前并没有找到对padding的一致性的处理 ...

  3. python基础 补漏

    输出 -----------定义变量类型 类型 集合 mongodb的用法和redis差不多一样的 NoSQL 数据库之一 https://www.runoob.com/python3/python- ...

  4. C#中检测代码执行时间

    使用System.Diagnostics.Stopwatch, using System; using System.Diagnostics; using System.Threading; clas ...

  5. 多线程事务回滚sqlSession, spring-mybatis 开启事务

    @Resource SqlContext sqlContext; /** * 多线程事务. * @param employeeDOList */ @Override public void saveT ...

  6. Grafana + Prometheus 监控 Zookeeper

    废话不多说,前几篇已经相应的介绍Grafana 跟 Prometheus,如有不清楚,请参考: https://www.cnblogs.com/zgz21/p/12054518.html https: ...

  7. 【C++复习】第八章 多态性（1）（多态类型、运算符重载）

    1.多态性 1.1 什么是多态? 多态是指相同消息被不同对象接收后导致不同的行为,所谓消息是指对类成员函数的调用,不同的行为是指不同的实现,也就是调用了不同的函数. 消息在C++编程中指的是对类的成员 ...

  8. java抽象类继承抽象类和抽象方法 java抽象类继承抽象类和抽象方法

    抽象类除了不能实例化对象之外,类的其它功能依然存在,成员变量.成员方法和构造方法的访问方式和普通类一样. 由于抽象类不能实例化对象,所以抽象类必须被继承,才能被使用.也是因为这个原因,通常在设计阶段决 ...

  9. 织梦dedecms网站迁移搬家图文教程

    织梦dedecms网站迁移搬家图文教程 2014-07-31  dedecms教程  文章介绍 织梦作为国内使用最多的程序之一,难免很多新手在接触dede时不知道怎么转移也就是搬家dede的程序,而且 ...

  10. Java基础之注释

    注释 在Java的编写过程中我们需要对一些程序进行注释,除了自己方便阅读,更为别人更好理解自己的程序,可以是编程思路或者是程序的作用. 注释不会被执行,是给写代码的人看的. 书写注释是一个非常好的习惯 ...