在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网络视图独有的奇怪问题由以下人员解决:
- 根据设备宽度和所需应用程序宽度计算所需比例
- 设置
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'/>");