Unexpected Viewport width on fullscreen HTML5 on mobile browsers

Issue details

This may be a misunderstanding on my part and not an actual issue, but here we go. My project uses a FitViewport with a square proportion. It behaves as expected on native (non-HTML5) desktop: if I resize the window, the FitViewport adjusts its dimensions, and the reported width and height (through Viewport.getScreenWidth/Height()) match what I see on screen pixel by pixel.

The HTML5 project uses the fullscreen code on HtmlLauncher.java, and a version of index.html where I just removed the superdev bar. When I load the project from a desktop browser (Firefox and Chrome on Linux Mint) FitViewport reports the dimensions I actually see on screen (just like on native). However, on mobile browsers (Android Chrome, iPad Chrome, iPad Safari, iPhone Safari - I can find OS versions if necesary) FitViewport always reports a width of 980 pixels, instead of the horizontal resolution of the device (1080 on my Android phone, 768 on the iPad Mini, etc. - see attached screenshot)

I would like to understand what is going on before I go on to debug a problem I’m having after uploading the project to itch.io.

Reproduction steps/code

I’m attaching a barebones project that reproduces the problem. It should build as-is. The most relevant files are:

• HtmlLauncher.java, where the fullscreen code is uncommented and the necessary imports added.
• index.html, where the superdev bar is commented.
• MyGdxGame.java, a minimal program that reproduces my Viewport situation. fstest_sample.zip

Version of LibGDX and/or relevant dependencies

• Project compiles against gdxVersion = ‘1.9.8’
• Project template generated by gdx-setup.jar from August 3rd.

Please select the affected platforms

• Android
• iOS (robovm)
• iOS (MOE)
• HTML/GWT
• Windows
• Linux
• MacOS

[daniig]

Perfect, that did the trick, thank you 😃

In summary, the only addition to the original index.html, besides removing the superdev bar, is this:

<meta id="gameViewport" name="viewport" content="width=device-width initial-scale=1"> <script> document.getElementById('gameViewport').setAttribute('content', 'width=device-width initial-scale=' + 1/window.devicePixelRatio); </script>

Setting initial-scale to the inverse of window.devicePixelRatio seems to effectively account for the device’s density. The game now runs at a 1:1 ratio of CSS to real screen pixels, looking sharp instead of all blurry.

If I had any knowledge of CSS, HTML5, or mobile web development, I’d consider submitting a pull request for this file with the addition I proposed, since everyone who attempts to publish in HTML5 for mobile is going to encounter this problem. Instead, I’d appreciate it if the more knowledgeable minds here (such as the participants above) take a look at it and give their opinion 😄

[MobiDevelop]

Merged PR, reopen if needed.