UniWebView：使用视口标签时在 iOS 上出现滚动问题答案

【问题标题】：UniWebView: problems with scroll on iOS when using viewport tagUniWebView：使用视口标签时在 iOS 上出现滚动问题
【发布时间】：2022-11-10 22:19:07
【问题描述】：

在 iOS 和 Android 上使用 UniWebView 4.12.1。

我们希望为所有设备固定我们网站的宽度，以便无论设备大小如何，它都具有相同的外观。 HTML中有一个很好的工具：

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

它可以在 Android 和 Safari 应用程序中顺利运行。但由于某种原因，它破坏了 iOS 上 UniWebView 中的平滑滚动。还有另一个副作用：当您滚动通过边缘时，网站开始抖动（就像有一些脚本试图防止弹跳一样）。

如果我们将宽度更改为device-width，它会再次平滑滚动。

那么，有没有办法在 iOS 上将固定大小的视口与 UniWebView 一起使用而不会破坏平滑滚动？

2022 年 8 月 10 日更新

似乎不同的宽度在某些 Apple 设备上运行顺畅，但在其他设备上会破坏平滑滚动。例如，如果我设置width=354：

iPhone 13 Mini：平滑滚动
iPhone 13 Pro Max：滚动中断
iPhone 11 Pro Max：滚动中断

width=355

iPhone 13 Mini：滚动中断
iPhone 13 Pro Max：平滑滚动
iPhone 11 Pro Max：平滑滚动

【问题讨论】：

标签： html unity3d safari uniwebview

【解决方案1】：

这个似乎是 iOS webview 独有的奇怪问题通过以下方式解决：

根据设备宽度和所需应用程序宽度计算所需比例

为initial-scale、minimum-scale 和maximum-scale 设置相同的值

代码：

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'/>");

【讨论】：