我如何隐藏iPad Safari WebApp全屏模式下的新网址栏，自iPadOS 13起出现？

Question

iPadOS 13现在通过Safari上的“添加到主屏幕”安装Web应用程序时，即使添加了apple-touch-fullscreen元标记，也会显示白色/灰色条。该栏包括用于调整字体大小和请求桌面站点的菜单，但已经影响了可用的屏幕大小，因此用户现在必须滚动才能查看应用程序菜单。

是否有任何方法可以隐藏此栏，例如强制使任何台式机/移动网站都不需要选择？

Answer 1

我已经找到解决方案。

iPadOS确实向Web应用程序添加了网址栏，即使添加了apple-touch-fullscreen元标记，但现在它使用与Progressive Web Apps（PWA）一起使用的manifest.json文件来检测全屏模式。它已在IOS 13版本之前支持此功能，但只有现在才需要全屏体验。

在我的应用程序中，仅当检测到Google Chrome时才添加manifest.json链接标签<link rel="manifest" href="manifest.json">；更新它以在检测到iPad上的Safari时添加链接，导致灰色条被完全隐藏（请注意，此版本中的iPad检测已更改，因为现在可以请求移动/台式机版本）

允许全屏显示的manifest.js文件如下所示（显示：“独立”允许全屏显示）

{
"name": "MyApp",
"short_name": "MyApp",
"description": "MyApp description",
"version": "0.0.0.1",
"manifest_version": 2,
"default_locale": "en-GB",
"author": "Christopher Dean",
"start_url": "Home.aspx",
"display": "standalone",
"orientation": "landscape",
"theme_color": "#015174",
"background_color": "#F7F4F3",
"icons": [
{
  "src": "images/app-icon-chrome.png",
  "sizes": "128x128",
  "type": "image/png"
},
{
  "src": "images/app-icon-tiny.png",
  "sizes": "32x32",
  "type": "image/png"
},
{
  "src": "images/app-icon-192.png",
  "sizes": "192x192",
  "type": "image/png"
},
{
  "src": "images/app-icon-512.png",
  "sizes": "512x512",
  "type": "image/png"
}
],
"app": {
 "urls": [
   "http://MyApp/Home.aspx"
 ],
 "launch": {
   "web_url": "http://MyApp/"
 },
 "background": {
   "scripts": [ "chrome.js" ]
 },
 "permissions": [ 
  "unlimitedStorage",
  "notifications",
  "fullscreen"
 ]
}
}