时间戳

首页 > 解决方案 > 每页方向的 Web 应用清单

progressive-web-apps - 每页方向的 Web 应用清单

问题描述

在渐进式 Web 应用程序的 Web 应用程序清单中，是否可以根据用户正在查看的页面设置不同的方向？

这是我的manifest.json样子：

{
    "dir": "ltr",
    "lang": "en-US",
    "name": "My Application",
    "scope": "/",
    "display": "standalone",
    "start_url": "start_page.aspx",
    "short_name": "My App",
    "theme_color": "transparent",
    "description": "My App Description",
    "orientation": "portrait",
    "background_color": "#00A3CC",
    "related_applications": [],
    "prefer_related_applications": false,
    "icons": [
    {
        "src": "Images/Icon.png",
        "type": "image/png",
        "sizes": "192x192"
    },
    {
        "src": "Images/Icon.png",
        "type": "image/png",
        "sizes": "512x512"
    }
    ]
}

安装应用程序时，上述清单会导致https://example.com/start_page.aspx所有其他页面都以纵向显示。是否可以强制https://example.com/other_page.aspx以横向显示，同时将我的网站的其余部分保持纵向？

标签： progressive-web-appsmanifest.jsonpwa

解决方案

manifest.json - 方向是整个应用程序的静态选项。您不能拥有每页/每模块的值。

您有两种选择来解决您的问题。

1) 使用 CSS 定向 - 将 other_page.aspx 加载到当前页面中的 a 中（如 SPA），并在此答案中使用 CSS通过移动 90 度来定向横向。

2) 将您的 other_page.aspx 作为一个单独的应用程序，并带有一个横向的单独 manifest.json。只有在将其作为逻辑上不同的模块分开是有意义的情况下，您才能执行此操作。

推荐阅读