[iphoneX.css]

iphoneX.md

搜索关键词 iphone X fixed bottom

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

• 新增 viewport-fit 属性，使得页面内容完全覆盖整个窗口：

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

第二步：页面主体内容限定在安全区域内

body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

第三步：fixed 元素的适配

类型一：fixed 完全吸底元素（bottom = 0)

• 使用padding-bottom

{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

• height

{
  height: calc(x + constant(safe-area-inset-bottom));
  height: calc(x + env(safe-area-inset-bottom));
}

类型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回顶部”、“侧边广告” 等

{
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

更详细请看：https://aotu.io/notes/2017/11/27/iphonex/

其他

• iPhoneX 竖屏

@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait){
 /*针对顶部的写这下面*/
 .test3{}
 /*针对底部的这写这下面*/
 /*不通顶有play bar , 通顶有play bar*/
 @media (height: 635px),(height: 723px){
   .test3{}
 }
 /*不通顶无play bar,全屏,手Q，微信*/
 @media (height: 724px),(height: 812px){
   .test3{}
 }
}

• iPhoneX 横屏

media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape){
            body {
                height: 100vh;
            }
            .help_container {
                margin-left: constant(safe-area-inset-left);
                margin-left: env(safe-area-inset-left);
                margin-right: constant(safe-area-inset-left);
                margin-right: env(safe-area-inset-left);
            }
            .help_feedback .weui-cell{
                padding-bottom: constant(safe-area-inset-bottom);
                padding-bottom: env(safe-area-inset-bottom);
            }
}