V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
serafin
V2EX  ›  iPhone

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

  •  1
     
  •   serafin · 2023-03-30 14:36:31 +08:00 · 8384 次点击
    这是一个创建于 598 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    10 条回复    2023-03-31 18:47:55 +08:00
    MossFox
        1
    MossFox  
       2023-03-30 14:38:29 +08:00
    需要网页开发者主动适配才行。
    tudouxian
        2
    tudouxian  
       2023-03-30 14:46:12 +08:00
    网页 ? pwa ?不过在苹果上还不好使不清楚,好像苹果不太喜欢这项技术
    serafin
        3
    serafin  
    OP
       2023-03-30 14:55:39 +08:00
    @MossFox 就是想问我需要适配什么
    goonervs
        4
    goonervs  
       2023-03-30 15:07:29 +08:00
    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
        5
    MossFox  
       2023-03-30 15:10:13 +08:00   ❤️ 1
    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
        6
    serafin  
    OP
       2023-03-30 15:30:29 +08:00
    已经有大图标的情况下
    实测只添加这个就可以了
    <meta name="apple-mobile-web-app-capable" content="yes">
    serafin
        7
    serafin  
    OP
       2023-03-30 19:56:47 +08:00
    <meta name="apple-mobile-web-app-capable" content="yes">
    更正:添加这条以后就算没有任何图标也能全屏。 添加到桌面的图标就是这个网页的截图。
    serafin
        8
    serafin  
    OP
       2023-03-31 06:05:07 +08:00
    在 Android Chrome 用这条也可以添加到桌面,全屏打开。<meta name="apple-mobile-web-app-capable" content="yes">
    shinsekai
        9
    shinsekai  
       2023-03-31 18:19:35 +08:00
    有没有对不支持全屏打开的网站使其全屏打开的插件?
    serafin
        10
    serafin  
    OP
       2023-03-31 18:47:55 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   6145 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 02:44 · PVG 10:44 · LAX 18:44 · JFK 21:44
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.