meta标签设置状态栏颜色仅对ios safari生效，android chrome等完全无视；需配合viewport、添加到主屏幕及css env()等方案实现跨平台适配。
meta 标签设置状态栏颜色只对 iOS Safari 有效
Android Chrome 或其他 WebView（比如微信内置浏览器）不响应 <meta name="apple-mobile-web-app-status-bar-style">。这是个 Apple 专属行为，别指望它在安卓上变色——哪怕你写了 content="black-translucent"，安卓也完全无视。
常见错误是开发者在混合 App 或 PWA 项目里统一加这个 meta，结果测试时发现安卓手机状态栏还是系统默认色，以为代码写错了。其实不是 bug，是平台限制。
-
content="default"：状态栏文字黑色，背景半透（iOS 默认） -
content="black"：状态栏文字白色，背景纯黑 -
content="black-translucent"：状态栏文字白色，背景半透黑（内容会延伸到状态栏下）
必须配合 viewport 和添加到主屏幕才生效
这个 meta 不是写上去就起作用的。它只在用户把网页“添加到主屏幕”后、以 Web App 模式启动时才生效。普通 Safari 浏览标签页里打开，状态栏样式不会变。
所以你要确保同时设置：
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">（否则可能被忽略） - 页面支持离线（至少有 manifest 或 service worker），提升添加成功率
- 用户手动操作：Safari → 分享按钮 → “添加到主屏幕”
status-bar-style 的值对齐系统版本有差异
iOS 15+ 开始，black-translucent 实际表现和以前不同：状态栏区域不再自动拉伸页面内容，而是更接近 black 的行为；如果你依赖旧版“内容顶到状态栏下”的布局，可能需要补 CSS（比如 padding-top: env(safe-area-inset-top)）。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
另外，content="white" 是无效值，iOS 不识别——别抄错文档。
- iOS 13–14：
black-translucent真正半透，内容可上浮 - iOS 15+：
black-translucent渲染更保守，建议优先用black - 所有版本都不支持 hex 颜色或 CSS 变量，只认那三个字符串值
替代方案：CSS env() + safe-area-inset-top 更可控
如果目标是适配所有现代 iOS，并且要精确控制顶部留白或背景色，光靠 meta 不够。得结合 CSS：
body {
padding-top: env(safe-area-inset-top);
background-color: #007aff;
}
@media (prefers-status-bar-style: dark) {
body { --status-bg: #000; }
}
这样既绕过 meta 的平台限制，又能响应深色模式变化。不过注意：env(safe-area-inset-top) 在非全屏 Web App 下返回 0，所以仍需确认运行环境。
真正在意状态栏视觉一致性？别只押注一个 meta 标签。它只是入口开关，后面还得靠 CSS 和运行时判断兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
