UniWebView:在iOS上使用视口标记时出现滚动问题



在iOS和Android上使用UniWebView 4.12.1。

我们希望为所有设备固定我们网站的宽度,使其无论设备大小都具有相同的外观。HTML中有一个很好的工具:

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

它在Android和Safari应用程序中运行顺利。但由于某种原因,它破坏了iOS上UniWebView的平滑滚动。还有另一个副作用:当你滚动到边缘时,网站开始抖动(就像有一些脚本试图防止反弹一样(。

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

那么,有没有一种方法可以在iOS上使用UniWebView的固定大小视口,而不会破坏平滑滚动?

更新10.08.2022

对于一些苹果设备来说,不同的宽度似乎可以平滑地工作,但对于其他设备来说,则会破坏平滑滚动。例如,如果我设置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:平滑滚动

这个似乎是iOS网络视图独有的奇怪问题由以下人员解决:

  1. 根据设备宽度和所需应用程序宽度计算所需比例
  2. 设置initial-scaleminimum-scalemaximum-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'/>");

最新更新