一、使用背景

苹果官方推荐：使用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. VMware Fusion Pro 13.0.0 最新序列号【转】

    Fusion简介 VMware Fusion是最好的Windows-to-Mac解决方案,是任何平台上最强大的应用开发和测试工具. Fusion 13支持macOS 13.0,为开发者.IT管理员和普 ...

  2. ubuntu iptables 做为路由转发

    实现功能,本地服务器的号段的192.168.8.0/24,而做为路由器的机器有2个ip,192.168.8.x和另一个ip,而另一个ip可以访问 192.168.2.0/24号段, 为了让其它192. ...

  3. mybatis 一级、二级缓存机制

    MyBatis 提供了对缓存的支持,分为一级缓存和二级缓存 一级缓存是 SqlSession 级别的缓存.在操作数据库时需要构造 SqlSession 对象,在对象中有一个数据结构(HashMap)用 ...

  4. 关于uniapp 打自定义基座部分手机不能自动安装的问题

    部分手机指的是-------没错就辣鸡 vivo手机 解决办法----进入手机文件管理-----根目录-----会有一个你打包的app.apk文件,手动安装一下就好了 搜索 复制

  5. Java基础之标识符和关键字

    关键字 标识符 Java所有的组成部分都需要名字.类名.变量名以及方法名都被称为标识符. Java 中标识符是为方法.变量或其他用户定义项所定义的名称.标识符可以有一个或多个字符. 标识符注意点: 在 ...

  6. C# 使用CefSharp完成自动签到

    1首先新建项目,右键项目选择管理NuGet 程序包,在浏览中搜索CefSharp.Winfrom ,点击安装,会自动安装相应的包.因为CefSharp是不能以AnyCPU的模式运行所以需要修改配置,有 ...

  7. 11 个Chrome骚技巧让你为所欲为

    1.曾经,在线调伪类样式困扰过你? 2.源代码快速定位到某一行 ctrl + p 3.联调接口失败时,后台老哥总管你要 response? 4.你还一层层展开 dom:Alt + Click 5.是不 ...

  8. JS篇(006)-怎样添加、移除、移动、复制、创建和查找节点？

    答案: 1)创建新节点 createDocumentFragment() //创建一个 DOM 片段 createElement() //创建一个具体的元素 createTextNode() //创建 ...

  9. sync.WaitGroup

    WaitGropu使用注意 作groutine参数时传指针 type WaitGroup struct { noCopy noCopy // 64-bit value: high 32 bits ar ...

  10. 解决ESP8266反复启动问题

    ESP8266刷不同固件后,有时会出现反复启动的问题,可能是FLASH里有未擦除干净的区域. 使用乐鑫 Flash 下载工具擦除 选好串口后点击erase擦除,即可正常使用