For an application, I need to send chrome on android into full-screen mode.
I know that I need to use the Fullscreen API, which involves calling Element.webkitRequestFullscreen().
So, I call this on document.body as I want everything to be put into fullscreen mode and take advantage of all the phone screen.
However the problem is that the screen is resized/loses quality. This severely mucks up my application (which is drawing to a canvas for virtual reality) because I need all the resolution I can get!
To demonstrate the screen has been enlarged and lost drawable pixels, see this from the console of inspecting my phone:
window.innerWidth
980
window.innerHeight
1547
//now I enter full screen...
window.innerWidth
360
window.innerHeight
640
Clearly, innerWidth and innerHeight are being reduced by something when entering fullscreen, but I can't figure out what.
I have tried different resizing of the canvas which is contained in the body but to no avail.
But what I thought would be the solution would be to add a viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
and I also tried setting a definitive content width:
<meta name="viewport" content="width=900, initial-scale=1">
but neither of these seemed to have any effect on the behaviour of the webpage, so I am not sure if I am placing them wrong (in the <head>) or if I have the syntax wrong, but they don't change anything.
The solution (more of a workaround) was to turn my website, that I was opening in Chrome on my phone, into a Progressive Web App.
This is as simple as writing a short manifest.json file in the root directory then once the website is open in Chrome, tapping on "Add to Home Screen".
Now the manifest.json file has an option: display: fullscreen.
This does not reduce the working space resolution and was just the fix I needed.
Furthermore, considering my goal of a VR experience, it makes more sense for this to be a web app than a website that you have to fuss around with in Chrome.