Viewport fit - issues with iOS browsers

Phaser 3
1

Hey!
I’ve been struggling a bit with getting a consistent result on iPhone X in terms of my game’s scale which seem to differ from Safari to Chrome, see images below.
chrome_screenshot

safari_screenshot
safari_screenshot.jpg932×479 173 KB

This might be more related to html/css rather than phaser (though the ScaleManager might play a role), but as a newcomer to web-dev I’m hoping someone here can help. What I’ve found on the topic is that iOS has changed ways of handling this on several occasions, and it seems like in the near future iOS12 will even allow fullscreen websites on iPhone (currently only iPad). However, as I’m in need of a solution that will just take up all the available space on the screen I’m not interested in the fullscreen solution, as of now. Does anyone know if it’s possible to ‘stretch’ the canvas to the entire screen on chrome, and limit the height of the canvas on safari so it doesn’t try and take up the entire screen and then push it’s content down to show the address bar.

I’m using Phaser 3.16.2. Code snippets below.

HTML

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<meta name="viewport"
    content="width = device-width, initial-scale = 1.0, minimum-scale = 1, maximum-scale = 1, user-scalable = no, viewport-fit=cover,minimal-ui" />

<script src="main.js"></script>
<title>Kandidat Spillet</title>

<style type="text/css">
    body {
        min-height: 100vh;
        min-width: 100vw;
        height: 100%;
        width: 100vw;
        margin: auto;
    }

    #container {
        position: absolute;
        overflow: hidden;
    }
</style>

Phaser

var config = {
type: Phaser.AUTO,
width: window.innerWidth * window.devicePixelRatio,
height: window.innerHeight * window.devicePixelRatio,
autoResize: true,
scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH,
},
parent: 'game',
title: 'Kandidat Spillet',
version: '0.0.1',
scene: gamevars.scenes
}

var game = new Phaser.Game(config);
2

Does it do the same thing on Chrome on Android? If yes, I can help you debug it. (I do not have a iPhone with a notch)

Maybe try to put parent, width and height inside scale.

Maybe this link (although it is related to PWA) will help you.

3

On an android in chrome it looks like this with the address bar and no address bar, respectively:
chrome_android_address_screenshot chrome_android_noaddress_screenshot
So it still looks like chrome defines the viewport in a different way as the content should take up the entire height.

4

Have you checked it with a notch?
In some Android version you can add a virtual notch in the dev options.

5

I haven’t checked with a notch. The phone I have available doesn’t seem to have a virtual notch option. :S I’ll see if I can get a hold of one. Thanks though!

1 Like
6

Just to rule everything out, I would add some resets to the css to ensure the browsers don’t have any non-zero defaults for margin, padding, etc…

html, body
{
padding:0;
margin:0;
}