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的安全区域适配方案,及各路大神的方案进行整理。

  • 相关阅读:
    13.numpy线性代数和绘图
    12-numpy矩阵
    11-numpy视图与副本
    10-numpy排序搜索
    day12 异常 模块 单例
    day11面向对象 多态 静态方法 (三)
    day 10 面向对象(=)
    day9 面向对象
    day8 文件
    day7 地址 名片管理系统
  • 原文地址:https://www.cnblogs.com/haoning/p/14516822.html
Copyright © 2011-2022 走看看