Orientation property of manifest.json is not working

Question

This is my manifest.json

{
  "name": "XXXXX",
  "short_name": "XXXXX",
  "start_url": "/",
  "gcm_sender_id": "XXX",
  "background_color": "#dfdfdf",
  "display": "standalone",
  "orientation": "landscape",
  "icons": [
    {
      "src": "\/icons\/android-chrome-128x128.png",
      "sizes": "128x128",
      "type": "image\/png"
    },
    {
      "src": "\/icons\/android-chrome-144x144.png",
      "sizes": "144x144",
      "type": "image\/png"
    },
    {
      "src": "\/icons\/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image\/png"
    },
    {
      "src": "\/icons\/android-chrome-256x256.png",
      "sizes": "256x256",
      "type": "image\/png"
    }
  ]
}

This web app should always be in landscape mode, but it opens in portrait mode.

There is a question present here with the same problem, but none of the answers are solving my problem

What happens if yo uset your start_url to "start_url": "/index.html" ? — ReyAnthonyRenacia, May 30 '17 at 19:26
Possible duplicate : https://stackoverflow.com/questions/43494388/progressive-web-application-not-honouring-screen-orientation/43511606#43511606 — Kevin Farrugia, May 31 '17 at 05:02
@noogui i tried your suggestion but that didn't work either. My web app still opens in portrait mode :( — Yash Kochar, May 31 '17 at 05:16
@KevinFarrugia yeah problem is same, but i haven't find any solution. — Yash Kochar, May 31 '17 at 05:18
@yash kochar what chrome version? Have you been able to replicate on canary? — Kevin Farrugia, May 31 '17 at 10:50
Chrome version 58.0.3029.83. I haven't tried it on canary because end users will use only chrome, so i have to fix on chrome only. It was working fine before April but after April i am having the issue. — Yash Kochar, May 31 '17 at 11:40
Possible duplicate of [Progressive web application - not honouring screen orientation](https://stackoverflow.com/questions/43494388/progressive-web-application-not-honouring-screen-orientation) — abraham, Jun 01 '17 at 11:54

score 0 · Answer 1 · answered Feb 23 '21 at 17:10

I just tried "orientation": "landscape" on a sample app, and it seems to work correctly. You can see the code for the sample here

Based on your description, there are two possibilities why this may have failed at the time. First, it may have been a bug in Chrome that prevented this from happening. And second, the escaping of the forward slashes in your icons properties of your manifest may have caused issues parsing the manifest.

For example, you icons property should be:

"orientation": "landscape",
"icons": [
  {
    "src": "/icons/android-chrome-128x128.png",
    "sizes": "128x128",
    "type": "image/png"
  },
  {
    "src": "/icons/android-chrome-144x144.png",
    "sizes": "144x144",
    "type": "image/png"
  },
  {
    "src": "/icons/android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "/icons/android-chrome-256x256.png",
    "sizes": "256x256",
    "type": "image/png"
  }
]

I noticed that app, when you go to the menu in Chrome Mobile, gives you the option to install it... my app only gives you the option to "Add to Home screen". Should that make any difference? My manifest doesn't have icon, color, shortcut or share target tags, but i don't see why i should need them just for landscape mode to work — Michael, Mar 06 '21 at 23:59
Ok this is weird. I updated from Chrome 87 to 89 and re-added to the home page and now it shows landscape but i still can't get rid of the huge title bar at the top, even though i'm using display:standalone — Michael, Mar 07 '21 at 00:02

Orientation property of manifest.json is not working

1 Answers1