文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在iPad Safari WebApp全屏模式下隐藏自iPadOS 13以来出现的新网址栏？

问如何在iPad Safari WebApp全屏模式下隐藏自iPadOS 13以来出现的新网址栏？
EN

Stack Overflow用户

提问于 2019-10-15 19:44:27

回答 1查看 2.9K关注 0票数 3

现在，当WebApp通过“添加到主屏幕”安装时，Safari13会显示一个白色/灰色条，即使添加了苹果触摸全屏元标签也是如此。该栏包括一个菜单，用于调整字体大小和请求桌面站点，但已影响可用屏幕大小，因此用户现在必须滚动才能查看应用程序菜单。

是否有任何方法可以隐藏此栏，例如强制桌面/移动站点中的任何一个，以便不需要选择？

html

safari

ipados

ipados13

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-10-22 23:27:40

我已经找到了解决这个问题的办法。

即使添加了iPadOS -touch- fullscreen meta标签，苹果也会在web应用程序中添加网址栏，但现在使用渐进式Web应用程序使用的manifest.json文件来检测全屏模式。它在iOS13版本之前就支持这一点，但直到现在才需要全屏体验。

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

允许全屏的manifest.js文件如下所示(显示："standalone“允许全屏)

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

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58393922

复制

相似问题

问如何在iPad Safari WebApp全屏模式下隐藏自iPadOS 13以来出现的新网址栏？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在iPad Safari WebApp全屏模式下隐藏自iPadOS 13以来出现的新网址栏？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在iPad Safari WebApp全屏模式下隐藏自iPadOS 13以来出现的新网址栏？
EN