• iphoneX底部黑条问题解决,使用css @supports


    第一步:设置网页在可视窗口的布局方式

    新增 viweport-fit 属性,使得页面内容完全覆盖整个窗口:

    
    
    1
    
    
    <meta name="viewport" content="width=device-width, viewport-fit=cover">

    第二步:页面主体内容限定在安全区域内
    env() 和 constant()ios11新增特性

    ● safe-area-inset-left:安全区域距离左边边界距离
    ● safe-area-inset-right:安全区域距离右边边界距离
    ● safe-area-inset-top:安全区域距离顶部边界距离
    ● safe-area-inset-bottom:安全区域距离底部边界距离

    这里我们只需要关注 safe-area-inset-bottom 这个变量,因为它对应的就是小黑条的高度(横竖屏时值不一样)。

    @supports 按照浏览器是否支持一个或多个特定的 CSS 特性应用一组样式声明;

    如果我们只希望 iPhoneX 才需要新增适配样式,我们可以配合 @supports 来隔离兼容样式

    @supports (bottom: env(safe-area-inset-bottom)) {    // @supports 判断浏览器是否支持 bottom: env(safe-area-inset-bottom) 支持的话执行下面的样式 safe-area-inset-bottom: iphone安全区域距离底部边界距离
      body::after{  //例:如果同意上面条件的话就是iPhoneX,就把body下面插入一个after高度正好在,小黑条下面
      content:'',
      display:block,
      height:constant(safe-area-inset-buttom),  //高度等于小黑条的高度
       background-color:white,
     }
    }

    感谢您的阅读,本文由 凹凸实验室 版权所有。如若转载,请注明出处:凹凸实验室(https://aotu.io/notes/2017/11/27/iphonex/

  • 相关阅读:
    Dockfile 使用 非root 用户运行容器
    Latex 小记
    Tmux 小技巧
    配置本地 overleaf
    arm板载ubuntu18.04系统安装QT4.8.7
    移植32位QT程序到ubuntu18.04
    TLS1.0禁用问题
    TLS1.0禁用问题
    Delphi程序“自杀”的有效办法
    Delphi7程序出现“EOSError code8-存储不足”问题的分析与解决
  • 原文地址:https://www.cnblogs.com/liangziaha/p/12809872.html
Copyright © 2020-2023  润新知