Search code examples
htmlunity-game-enginesafariuniwebview

UniWebView: problems with scroll on iOS when using viewport tag

Using UniWebView 4.12.1 on iOS and Android.

We want to fix the width of our website for all devices, so that it has identical appearance regardless of the device size. There is a nice tool in HTML for that:

<meta name="viewport" content="width=320, user-scalable=no"/>

It works smoothly on Android and in the Safari app. But for some reason, it breaks smooth scrolling in UniWebView on iOS. And there's another side effect: the website starts jerking when you scroll pas the edges (like there's some script that tries to prevent bouncing).

If we change width to device-width it scrolls smoothly again.

So, is there a way to use fixed size viewport with UniWebView on iOS without breaking smooth scrolling?

Update 10.08.2022

It seems that differen widths work smoothly for some Apple devices but break smooth scrolling for the other devices. For example, if I set width=354:

  • iPhone 13 Mini: smooth scrolling
  • iPhone 13 Pro Max: broken scrolling
  • iPhone 11 Pro Max: broken scrolling

width=355

  • iPhone 13 Mini: broken scrolling
  • iPhone 13 Pro Max: smooth scrolling
  • iPhone 11 Pro Max: smooth scrolling
Solution

  • This strange problem which seems to be exclusive for iOS webview was solved by:

    1. Calculating desired scale from device width and desired app width
    2. Setting equal values for initial-scale, minimum-scale and maximum-scale

    Code:

    var deviceWidth = window.screen.width;
var appWidth = 360;
var scale = (deviceWidth/appWidth).toFixed(2);

document.write("<meta name='viewport' content='initial-scale=" + scale + ", minimum-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no' id='viewportMeta'/>");