Progressive web application - not honouring screen orientation

Question

My web app is not honouring the orientation set in my manifest.json:

{
  "manifest_version": 2,
  "version": "1",
  "name": "My App",
  "short_name": "My App",
  "icons": [
    {
      "src": "img/myapp/launcher-icon-0-75x.png",
      "sizes": "36x36",
      "type": "image/png"
    },
    {
      "src": "img/myapp/launcher-icon-1x.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "img/myapp/launcher-icon-1-5x.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "img/myapp/launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "img/myapp/launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "img/myapp/launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "theme_color": "#43c1b1",
  "background_color": "#43c1b1",
  "start_url": "/myapp",
  "scope": "/myapp",
  "orientation": "landscape",
  "display": "standalone"

}

Everything else works - the icons and the background colour so why would there be a problem forcing landscape?

Chrome (on mobile) v 57.0.2987

Thanks

score 1 · Answer 1 · answered Apr 19 '17 at 16:01

I think you are doing it right. Based on this page, you can enforce a specific orientation, which is advantageous for apps that work in only one orientation by using this "orientation": "landscape".

Try to place first the display before the orientation like in this example.

{
  "short_name": "Kinlan's Amaze App",
  "name": "Kinlan's Amazing Application ++",
  "icons": [
    {
      "src": "launcher-icon-2x.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-3x.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}

Seems that changing the order of display and orientation didn't work either. :) — beingalex, Apr 19 '17 at 16:24

score 1 · Accepted Answer · answered Apr 20 '17 at 06:15

1

Your original manifest.json is correct but it only works on Chrome Canary (version 59) but not on Chrome Stable (version 57).

I was unable to find any mention of it in the release logs though.

answered Apr 20 '17 at 06:15

Kevin Farrugia

6,431
4
38
61

Google recently announced [what was new in Chrome 58](https://developers.google.com/web/updates/2017/04/nic58), expect details about 59 in six weeks. – abraham Apr 20 '17 at 15:12
Doesn't work in 2020 in Chrome for Android version 83 – eddy Jun 02 '20 at 22:31

Progressive web application - not honouring screen orientation

2 Answers2

Linked