制作页面时，前端如何适应各种异形屏？

前端适应各种异形屏，主要依靠以下几种方法：

1. 使用 viewport meta 标签:

这是最基础也是最重要的一步。viewport meta 标签控制着页面如何在浏览器中显示，特别是移动设备。 需要设置 viewport 的 width、initial-scale、maximum-scale、user-scalable 等属性。

• width=device-width: 这会将 viewport 宽度设置为设备的宽度，无论屏幕方向如何。这是适配不同屏幕尺寸的关键。
• initial-scale=1.0: 设置初始缩放比例为 1，这意味着页面初始大小与设备宽度匹配，避免了默认缩放带来的问题。
• maximum-scale=1.0, user-scalable=no (可选): 这两个属性一起使用可以禁止用户缩放页面。对于一些需要精确布局的场景，例如游戏或需要保持特定比例的页面，这很有用。但通常建议允许用户缩放，以提升用户体验，尤其是在文字较小的页面上。

一个典型的 viewport meta 标签如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 使用 CSS 媒体查询:

媒体查询允许根据设备的特性（例如屏幕宽度、高度、分辨率、方向等）应用不同的样式。这对于处理不同屏幕尺寸和方向至关重要。

• 根据屏幕宽度适配: 可以使用 @media (min-width: ...) 和 @media (max-width: ...) 来根据屏幕宽度应用不同的样式。
• 根据屏幕方向适配: 可以使用 @media (orientation: portrait) 和 @media (orientation: landscape) 来根据屏幕方向应用不同的样式。

/* 例如，在大屏幕上显示三列布局，在小屏幕上显示单列布局 */
@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .container {
    display: block;
  }
}

3. 使用 CSS 单位:

使用相对单位（例如 %、em、rem、vw、vh）而不是绝对单位（例如 px）可以使页面元素根据屏幕大小进行缩放。

• vw 和 vh: vw 表示 viewport 宽度的百分比，vh 表示 viewport 高度的百分比。这些单位对于创建响应式布局非常有用。

4. 处理安全区域:

异形屏通常具有圆角、刘海或底部操作区域等非显示区域。为了避免内容被这些区域遮挡，需要使用 CSS 的 env() 函数和 constant() 函数来访问安全区域。

/* 例如，使页面内容在安全区域内显示 */
body {
  padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
  /* 或者使用 env() 函数，兼容性更好 */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

5. JavaScript 辅助:

在某些情况下，可能需要使用 JavaScript 来动态调整页面布局或元素大小。例如，可以获取窗口的尺寸和方向，然后根据这些信息更新页面样式。

6. 测试不同设备:

在开发过程中，务必在各种不同尺寸和类型的设备上测试页面，以确保其在所有设备上都能正常显示。可以使用浏览器开发者工具模拟不同设备，或者使用真机进行测试。

通过结合以上方法，可以有效地使前端页面适应各种异形屏，提供良好的用户体验。