The values of meta viewport attribute are not reflected when in full screen mode in android chrome browser

Question

When I am in full screen mode in android using fullscreen api, the values of meta viewport attribute like initial-scale and user-scalable are not reflected in the browser. If I am not in full screen mode, the values of meta viewport are reflected. You can check it by accessing MDN:Fullscreen api example from a mobile browser

I don’t find any source saying meta viewport will be disabled in fullscreen in android. So am I making any mistake or no one has documented it? Also pinch and zoom is disabled when in fullscreen

Raised a issue in https://github.com/whatwg/fullscreen/issues/111 but no luck.

Want to know if there are alternatives to solve it

Answer 1

I was able to go fullscreen by an alternative method using the web app manifest. It does not interfere with the meta viewport.

Here are the steps

1. Add this to the head section:

<link rel="manifest" href="/manifest.json">

2. Create a manifest file like the following:

 {
      "short_name": "App Name",
      "name": "Full app name",
      "icons": [
        {
          "src": "launcher-icon-4x.png",
          "sizes": "192x192",
          "type": "image/png"
        }
      ],
      "start_url": "/index.html",
      "display": "fullscreen",
      "orientation": "landscape"
  }

The Google developers documentation to launch in fullscreen using a manifest is available here.

The issue of fullscreen disabling the metaview port is raised here.

Answer 2

Unfortunately the answer is no, you cannot control how the meta viewport attribute is handled. "Full webpage and disabled zoom viewport meta tag for all mobile browsers" covers many Android and iOS versions in fullscreen. However, you can use a series of browser/ version detection to work around known bugs. It's not elegant, but given Android's fragmentation it might be necessary.