从iPadOS 13开始，如何隐藏iPad Safari WebApp全屏模式下的新网址栏? [英] How can I hide the new url bar on iPad Safari WebApp fullscreen mode, appearing since iPadOS 13?

问题描述

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

iPadOS 13 now shows a white/grey bar when a WebApp is installed via 'Add to Home Screen' on Safari, even when apple-touch-fullscreen meta tag is added. The bar includes a menu to resize font and request desktop site, but has affected the available screen size so that the users now have to scroll to view the app menu.

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

Is there any way to hide this bar, such as forcing either Desktop/Mobile site so that the selection is not required?

推荐答案

我已经找到解决方案.

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

iPadOS does add the url bar to web apps even if the apple-touch-fullscreen meta tag is added, but now uses the manifest.json file used with Progressive Web Apps (PWA) to detect fullscreen mode. It has supported this before version IOS 13 but only now is it required for the fullscreen experience.

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

In my application the manifest.json link tag <link rel="manifest" href="manifest.json"> was ONLY being added when Google Chrome is detected; updating it to add the link when Safari on the iPad is detected resulted in the grey bar being hidden completely (Note that iPad detection has changed in this version now that mobile/desktop versions can be requested)

允许全屏显示的manifest.js文件如下所示(显示:独立"允许全屏显示)

The manifest.js file that allowed fullscreen is shown below (display: "standalone" allows fullscreen)

{
"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"
 ]
}
}

这篇关于从iPadOS 13开始，如何隐藏iPad Safari WebApp全屏模式下的新网址栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！