一、使用背景

苹果官方推荐：使用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. eKuiper 1.8.0 发布：零代码实现图像/视频流的实时 AI 推理

    LF Edge eKuiper 是 Golang 实现的轻量级物联网边缘分析.流式处理开源软件,可以运行在各类资源受限的边缘设备上.eKuiper 的主要目标是在边缘端提供一个流媒体软件框架(类似于 ...

  2. [Oracle19C ASM管理] ASM的网络服务

    启用了ASM集群以后,网络管理放给了grid用户.grid用户的$ORACLE_HOME/network/admin有网络配置文件,而oracle用户下的网络配置文件则不存在了. [grid@cent ...

  3. 04jsp（2）

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  4. 如何把腾讯地图左边的搜索结果导出成excel里？

    最近,又有朋友让我再写一个 腾讯地图 采集商家的地址,电话信息. 原理应该差不多,我就查阅了下腾讯地图的采集规则,编写了专门针对腾讯地图的采集软件. 界面上和百度地图的采集软件基本类似,但是不用选择区 ...

  5. Linux profile、bashrc、bash_profile

    一.profile 文件 1.profile 文件的作用 profile(/etc/profile),用于设置系统级的环境变量和启动程序,在这个文件下配置会对所有用户生效.当用户登录(login)时, ...

  6. fastapi loguru

    使用loguru记录日志 安装 pip install loguru 基本使用 那么这个库怎么来用呢?我们先用一个实例感受下: In [1]: from loguru import logger .. ...

  7. 2022.11.13 NOIP2022 模拟赛八

    「ROI 2017 Day 2」存储器 无聊的题. 首先 \(s\) 中每一个片段,其在 \(t\) 中对应的字符必然是相同的. 对于 \(t\) 中的每一个片段,考虑检查能否操作出这个片段,实际上只 ...

  8. oracle的ASM扩容

    #查看服务器上总共有多少个asmdisk [grid@rkdb1]$ asmcmd lsdsk --discovery Path /dev/oracleasm/disks/OCPDATA1 /dev/ ...

  9. jq-Grid 能折叠的表格

    有一个需求是需要用jq-Grid展示一个可以折叠的表格,并且要求在页面初始化的时候就将表格折叠起来,我看了一下文档可以给列表增加 toolbar: [true, "top"],ca ...

  10. python_列表和元组的转换

    1, 通过list函数将元组的数据获取到,保存到新定义的列表里面.备注:元组的数据不会更改. info_tuple = ("小明", 24, 1.75) info_list = l ...