Web App Manifest Per Page Orientation

Question

In the web app manifest of a progressive web app, is it possible to set different orientations based on what page the user is viewing?

Here's what my manifest.json looks like:

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

The above manifest causes https://example.com/start_page.aspx and every other page to be displayed in portrait orientation when the app is installed. Is it possible to force https://example.com/other_page.aspx to be displayed in landscape orientation while keeping the rest of my site in portrait orientation?

score 0 · Answer 1 · answered Jul 02 '18 at 18:40

manifest.json - orientation is a static option for the entire application. You cant have per page/per module values.

You have two options to solve your issue.

1) Orient using CSS - Load the other_page.aspx inside a in the current page(like SPA) and use CSS as in this answer to orient in landscape by shifting 90 degree.

2) Make your other_page.aspx as a separate app with a separate manifest.json with landscape orientation. You can do this only if this make sense to separate this as its a logically different module.

Web App Manifest Per Page Orientation

1 Answers1