一、使用背景

苹果官方推荐：使用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. pytest设计项目结构

    api目录封装所有的接口 testcases目录写所有的测试用例.conftest全局登录前置操作 data目录测试数据 common或者utils目录.存放公共模块比如读取yml文件.连接数据库.所 ...

  2. Python 画极坐标图

    需要用Python画极坐标等值线图,以下是所学的一些东西,特此记录 -------------------------------------------------- 翻译自 https://sta ...

  3. wpf treeview 新增右键菜单

    <TreeView.ItemContainerStyle> <Style TargetType="{x:Type TreeViewItem}"> <E ...

  4. Characterizing possible failure modes in physics-informed neural network

    NeurIPS 2021 表征PINN中可能的失败模式.本文的思路也比较简单,通过对PINN的优化域进行观察,发现导致PINN训练的原因并不是因为神经网络的表达力不足,而是由于PINN中引入了基于PD ...

  5. VM-tools灰色无法安装

    VM-tools灰色无法安装 选择"使用物理驱动器-自动检测". 参考链接: [1] https://www.jianshu.com/p/af4313d92fee

  6. dynamics 365 复制（克隆）现有组织

    很多时候需要复制现有的开发环境作为新的开发环境,以保留原有测试数据,旧的开发环境作为问题修复环境,以下是复制步骤: 1. 登录数据库服务器,备份现有数据库 2. 还原数据库为新的数据库名称 3. 在前 ...

  7. wrf-python离线安装

    由于客户环境不能联网,python的插件库只能离线安装,wrf库的安装中踩了不少坑,特此记录. 1.官方插件库pypi.org只有压缩包,没有提供wheel,在线安装没有问题. 2.下载压缩包解压后, ...

  8. linux 服务器 重命名

    vim /etc/hosts 追加 10.10.134.68 RmcbTestDB3 RmcbTestDB3               # ip  名称 名称 127.0.0.1 localhost ...

  9. 怎么理解超几何分布概率公式：p=C(M,k)C(N-M,n-k)/C(N,n)

    怎么理解超几何分布概率公式:p=C(M,k)C(N-M,n-k)/C(N,n) 前言:重在记录,可能出错. 超几何分布概率公式:p=C(M,k)C(N-M,n-k)/C(N,n),也就是: 到底要怎么 ...

  10. drf从入门到飞升仙界 06

    模型类准备 from django.db import models # 图书跟作者:多对多,需要建立中间表,但是我们可以通过ManyToManyField自动生成,写在哪里都行 # 图书跟出版社:一 ...