iPhone X H5页面适配：刘海与底栏适配方法

terry 2年前 (2023-09-23) 阅读数 72 #移动小程序

对于iPhone网页来说，浏览器已经处理了顶部的适配问题（刘海），所以只需要处理底部与小黑栏之间的适配问题（即常见的底部导航、返回顶部等）需要解决的关系问题）。下部固定位置元件）。

笔者在研究了官方文档并结合处理真实项目的经验后，整理了一套简单的定制方案分享给大家。我希望这对每个人都有用。以下是前后效果图：

众所周知，iPhoneX的屏幕顶部有一个刘海。 iPhone定制方法。

几个新概念

安全区域

安全区域是指视觉窗口范围，安全区域的内容不受圆角（角）、齐刘海（传感器体）、小黑条（ Home）指示器），如下图所示：

viewport-fit

iOS11新功能，Apple是对现有viewport meta标签的扩展，以适配iPhoneX，用于设置可视化窗口布局中的网页可以设置三个值：

值	描述
auto	与默认`include`一致。页面内容显示在安全区域中。 `viewprot-fit:auto` 相当于 `viewport-fit:contain`
contain	视口完全包含 Web 内容（左图）。页面内容显示在`安全区域`。 `viewport-fit:contain`
cover	Web 内容完全覆盖视口窗口（右图）。页面内容充满屏幕。`viewport-fit:cover`

常量函数

iOS11新函数Webkit CSS函数用于通过四个预定义变量设置安全区域与边框之间的距离（单位为px）：safe-area- inset- left：安全区域与左边框之间的距离

safe-area-inset-right：安全区域与右之间的距离。 safe-area-inset-top：安全区域到上边界的距离

safe-area-inset-bottom：安全区域到下边界的距离注意：网站没有添加视口匹配的默认扩展=include必须适配iPhoneX。必须设置viewport-fit=cover，否则constant功能将不起作用。这是适应的必要条件。

官方文档提到，未来env()将取代constant()，目前还没有函数和css可能在webkit中。直接使用仅在 webkit 内核下支持使用变量函数
constant：适用于 iOS

env：适用于 iOS >= 11.2 的系统 ❀ 注意：默认不包含网页扩展性能为viewport-fit=contain，需要针对iPhone进行适配。需要设置viewport-fit=cover，这是定制的重要一步。

定制示例

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

<meta name='viewport'  content="width=device-width, viewport-fit=cover"  />
复制代码

第二步：将页面主要内容限制在安全区域

body {
  /* 适配齐刘海*/
  padding-top: constant(safe-area-inset-top);  
 /* 适配底部黑条*/
  padding-bottom: constant(safe-area-inset-bottom);
}
复制代码

第三步：从固定元素进行定制

Bottom不是0

/* bottom 不是0的情况 */
.fixed {
  bottom: calc(50px(原来的bottom值) + constant(safe-area-inset-bottom));
}
复制代码

Bottom=0）

/* 方法1 ：设置内边距 扩展高度*/
/* 这个方案需要吸底条必须是有背景色的，因为扩展的部分背景是跟随外容器的，否则出现镂空情况。*/
.fix {
  padding-bottom: constant(safe-area-inset-bottom);
}
/* 直接扩展高度*/
.fix {
  height: calc(60px(原来的高度值) + constant(safe-area-inset-bottom));
}

/* 方法2 ：在元素下面用一个空div填充， 但是背景色要一致 */
.blank {
  position: fixed;
  bottom: 0;
  height: 0;
  width: 100%;
  height: constant(safe-area-inset-bottom);
  background-color: #fff;
}
/* 吸底元素样式 */
.fix {
  margin-bottom: constant(safe-area-inset-bottom);
}
复制代码

最后：使用@supports

由于只有直刘海和下黑条的模特需要调整样式，所以可以使用@support：

@supports (bottom: constant(safe-area-inset-bottom)) {
  body {
    padding-bottom: constant(safe-area-inset-bottom);
  }
}
复制代码

完整识别码

@支持隔离兼容模式

由于只需在刘海合适、底部黑条的机型上调整样式即可，配合@support使用：@media请求

@mixin iphonex-css {
  padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
  padding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88px
  padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
  padding-left: env(safe-area-inset-left); //如果未竖屏时为0
  padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
  padding-right: env(safe-area-inset-right); //如果未竖屏时为0
  padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高度 34px
  padding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高度 34px
}

/* iphonex 适配 */
@mixin iphonex-media {
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    body.iphonex {
      @include iphonex-css;
    }
  }
}
复制代码