一招搞定兼容手机刘海屏，底部安全距离问题

设置meta标签属性

    <meta
          name="viewport"
          content="width=device-width,
          initial-scale=1.0,
          maximum-scale=1.0,
          user-scalable=no, 
          viewport-fit=cover"
      />        

　　

这个viewport meta标签用于控制移动端页面的显示和缩放行为。让我详细解释每个属性的含义：

各属性详解

1. width=device-width

• 含义: 设置视口宽度等于设备屏幕宽度
• 作用: 确保页面在不同设备上都能正确适配屏幕宽度

2. initial-scale=1.0

• 含义: 设置页面初始缩放比例为1.0（即100%）
• 作用: 页面加载时不进行缩放，以原始大小显示

3. maximum-scale=1.0

• 含义: 设置用户可以缩放的最大比例为1.0
• 作用: 限制用户最多只能放大到100%，防止过度放大

4. user-scalable=no

• 含义: 禁止用户手动缩放页面
• 作用: 用户无法通过双指捏合等手势来放大或缩小页面

5. viewport-fit=cover

• 含义: 视口覆盖整个屏幕区域
• 作用: 主要针对iPhone X等有刘海屏的设备，让页面内容可以延伸到安全区域之外

整体效果

这个配置的组合效果是：

• 创建一个固定尺寸、不可缩放的移动端页面
• 页面宽度完全适配设备屏幕
• 在刘海屏设备上可以全屏显示
• 常用于移动端应用或需要精确控制布局的页面

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

　　

这个meta标签是专门针对iOS Safari浏览器的，用于控制Web应用在全屏模式下状态栏的显示样式。

属性详解

标签作用

• 专用平台: 仅在iOS Safari浏览器中生效
• 生效条件: 必须配合 apple-mobile-web-app-capable 设置为 yes 使用
• 功能: 控制全屏Web应用状态栏的外观样式

content属性值

1. black（当前设置）

• 效果: 状态栏背景为黑色，文字和图标为白色
• 适用: 深色主题的应用

2. default

• 效果: 状态栏背景为白色，文字和图标为黑色
• 适用: 浅色主题的应用

3. black-translucent

• 效果: 状态栏背景透明，文字和图标为白色
• 特点: 页面内容会延伸到状态栏区域下方

使用场景

• PWA应用: 渐进式Web应用
• 全屏Web应用: 需要类似原生应用体验的网页
• 移动端专用页面: 主要在iOS设备上使用的页面

注意事项

• 只有在用户将网页"添加到主屏幕"后才会生效
• 必须与 apple-mobile-web-app-capable="yes" 配合使用
• 仅在iOS Safari中有效，其他浏览器会忽略此标签