Cocos Creator 中关于移动端 Web 应用全屏模式的兼容性优化

在 Cocos Creator 3.8.4 版本中，开发者在使用浏览器预览功能时可能会注意到 Chrome 控制台输出的一个警告信息，提示apple-mobile-web-app-capable元标签已被弃用。这个问题涉及到移动端 Web 应用全屏模式的兼容性设置，值得开发者关注。

问题背景

移动端 Web 开发中，我们经常需要控制应用是否以全屏模式运行。传统上，iOS 设备上的 Safari 浏览器使用apple-mobile-web-app-capable元标签来实现这一功能，而 Chrome 浏览器则推荐使用更通用的mobile-web-app-capable标签。

在 Cocos Creator 的模板文件中，包括web-desktop/index.ejs、web-mobile/index.ejs和fb-instant-games/index.ejs，目前都只使用了apple-mobile-web-app-capable这一特定于苹果的标签，这导致了在 Chrome 浏览器中运行时出现弃用警告。

技术分析

这两个元标签的作用都是控制 Web 应用是否以全屏模式运行：

1. apple-mobile-web-app-capable：苹果 Safari 浏览器专用，控制是否隐藏浏览器 UI 元素
2. mobile-web-app-capable：Chrome 等现代浏览器支持的通用标准

虽然警告信息称前者已被弃用，但实际上目前 Safari 仍然只识别这个特定标签。而 Chrome 则建议使用后者，但也能兼容前者。一些非官方资料表明，Safari 可能也开始支持通用标签。

解决方案

Cocos Creator 开发团队决定在 3.8.5 版本中采用最稳妥的兼容方案：同时保留两个标签。这样既能确保在 Safari 上的兼容性，又能消除 Chrome 的警告信息。

具体实现方式是在模板文件中同时包含：

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

这种方案相比完全替换有以下优势：

1. 确保向后兼容，不影响现有 iOS 设备上的表现
2. 符合现代浏览器的标准
3. 避免因浏览器实现差异导致的功能缺失

开发者注意事项

对于使用 Cocos Creator 开发移动端 Web 应用的开发者，需要注意：

1. 如果自定义了项目模板，建议手动添加这两个标签
2. 全屏模式在不同平台上的表现可能仍有差异，需要进行充分测试
3. 某些浏览器可能对全屏模式有额外的权限要求

这个优化虽然看似简单，但对于提升跨平台 Web 应用的兼容性和用户体验有着重要意义，体现了 Cocos Creator 团队对细节的关注和对开发者体验的重视。