serafin
V2EX  ›  iPhone

iOS 如何添加网页到主屏幕可以全屏打开

  •  1
     
  •   serafin · Mar 30, 2023 · 13685 views
    This topic created in 1317 days ago, the information mentioned may be changed or developed.

    为什么部分网页添加到主屏幕可以全屏打开,比如 Heimdall 添加到主屏幕就可以全屏打开。大部分网站都不行。 需要什么条件才可以触发?

    10 replies  •  2023-03-31 18:47:55 +08:00
    MossFox
    MossFox
    Mar 30, 2023
    1
    需要网页开发者主动适配才行。
    tudouxian
    tudouxian
    Mar 30, 2023
    2
    网页 ? pwa ?不过在苹果上还不好使不清楚,好像苹果不太喜欢这项技术
    serafin
    serafin
    OP
    Mar 30, 2023
    3
    @MossFox 就是想问我需要适配什么
    goonervs
    goonervs
    Mar 30, 2023
    4
    head 里加上
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <link rel="manifest" href="manifest.json">

    manifest.json
    {
    "name": "App",
    "short_name": "app",
    "start_url": "/",
    "display": "fullscreen",

    "icons": [
    {
    "src": "/icons/icon.png",
    "sizes": "72x72",
    "type": "image/png"
    }
    ]
    }
    MossFox
    MossFox
    Mar 30, 2023❤️1
    5
    HTML Head:
    <link rel="manifest" href="/manifest.json">
    <link rel="icon" type="image/png" sizes="192x192" href="/image/icon-192.png">
    <link rel="apple-touch-icon" href="/image/icon-512.png">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    其中一部分设置 (比如 apple-mobile-web-app-status-bar-style) 按照实际需求改一下。可用的值可以查到。

    manifest.json 可以参考我之前整的玩意:
    https://img.mowl.cc/manifest.json

    然后就行了。另外就是留意一下 apple-touch-icon 只支持 PNG 格式。
    serafin
    serafin
    OP
    Mar 30, 2023
    6
    已经有大图标的情况下
    实测只添加这个就可以了
    <meta name="apple-mobile-web-app-capable" content="yes">
    serafin
    serafin
    OP
    Mar 30, 2023
    7
    <meta name="apple-mobile-web-app-capable" content="yes">
    更正:添加这条以后就算没有任何图标也能全屏。 添加到桌面的图标就是这个网页的截图。
    serafin
    serafin
    OP
    Mar 31, 2023
    8
    在 Android Chrome 用这条也可以添加到桌面,全屏打开。<meta name="apple-mobile-web-app-capable" content="yes">
    shinsekai
    shinsekai
    Mar 31, 2023
    9
    有没有对不支持全屏打开的网站使其全屏打开的插件?
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Privacy   ·   Solana   ·   4986 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 06:48 · PVG 14:48 · LAX 22:48 · JFK 01:48
    ♥ Do have faith in what you're doing.