Couldn't able to make it work for all devices

My Playcanvas experience has been hosted on a different server. It works fine on all desktops and laptops. When it comes to handheld devices, the game is not completely occupied to available screen space particularly on landscape view.

iPhone 7 - Safari: Always leaves blank space at the bottom like a black bar. If the address bar hides on auto-rotation, It doesn’t recalculate and fill the space.
iPhone 10 - Safari: It leaves blank space at the bottom only when it is on the full screen not when multiple tabs open or when the address bar available. (If it is in full screen it doesn’t occur)
Samsung M31 - Samsung Internet(browser): The whole UI looks like it is compressed without a proper aspect ratio. So it looks like squeezed and doesn’t fit the screen properly.

Is there a proper solution to fix the above-listed issues and a perfect solution for the iOS safari address bar issue? If it is not when can we expect from the Playcanvas team?

This is something that is on my list to fix as soon as possible. There’s some resizing issues on iOS that Safari doesn’t fire events for.

If you are self hosting, you can change the code in __start__.js

Samsung stretch issue: Samsung S9 Internet Browser stretches the screen · Issue #2386 · playcanvas/engine · GitHub

iOS is more problematic: See this thread: Orientation and screen squish

If you want to cover past the notch on iOS, you will need to add the view-fit=cover attribute on the HTML too: "The Notch" and CSS | CSS-Tricks

1 Like