zoukankan      html  css  js  c++  java
  • 适配iphoneX等机型底部安全区域

    1. meta标签中设置 viewport-fit=cover  
      <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    2. 利用css获取安全区域
      1. safe-area-inset-top 顶部
      2. safe-area-inset-left 左边
      3. safe-area-inset-right 右边
      4. safe-area-inset-bottom 底部
    3. 需要使用env() 或 constant()函数取值
      .content{
          padding-bottom: 0; 
          padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
          padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
      }
    4. 如果页面已经设置过内边距,可以使用calc()函数搞定
      .content{
          padding-bottom: 10px;
          padding-bottom: calc(10px + constant(safe-area-inset-bottom));
          padding-bottom: calc(10px + env(safe-area-inset-bottom));
      }
    5. env()可以写第二个参数,如果环境变量不可用,该参数可让您设置备用值
      .content{
          padding-bottom: env(safe-area-inset-bottom, 30px);
      }

      *注:最初使用媒体查询进行安全区域适配,经过查阅vant的安全区域适配方案,及各路大神的方案进行整理。

  • 相关阅读:
    函数的设计和使用
    python正则表达式
    Python字符串
    Python序列(十一)集合
    centos 磁盘分区、格式化及挂载
    Nginx下配置SSL证书 调转到IIS、tomcat二级站点
    Mime 类型列表
    WCF学习- 体系结构
    .NET Framework Client Profile 简介
    WCF学习- 基础概念
  • 原文地址:https://www.cnblogs.com/haoning/p/14516822.html
Copyright © 2011-2022 走看看