时间戳

首页 > 解决方案 > 如何在 iPadOS 13 后出现的 iPad Safari WebApp 全屏模式下隐藏新的 url 栏？

html - 如何在 iPadOS 13 后出现的 iPad Safari WebApp 全屏模式下隐藏新的 url 栏？

问题描述

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

有没有办法隐藏这个栏，例如强制桌面/移动站点，以便不需要选择？

标签： htmlsafariipadosipados13

解决方案

我已经找到了解决方案。

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

在我的应用程序中，<link rel="manifest" href="manifest.json">仅在检测到 Google Chrome 时才添加 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"
     ]
    }
}

推荐阅读