在 Android 移动设备上将旋转更改为横向后页面被缩放

Question

如何在将旋转从纵向更改为横向后避免页面缩放？如果内容大于设备宽度，则问题出现在移动 Android 设备上（我无法限制或缩放图像，应该会出现滚动）。

视口元标记的内容设置为“width=device-width, initial-scale=1.0”。

除了使用“user-scalable=no or maximum/minimum-scale=1”还有什么方法可以解决这个问题？

Answer 1

我遇到了这个问题，并且能够通过覆盖将初始比例值从 1 旋转到 1.001 来解决它。这有效地强制您使用的任何 Android 浏览器重新绘制页面，并且由于值非常接近，它们看起来几乎相同。

let _AndroidDevice = navigator.userAgent.includes('Android');
let metaViewport = $('meta[name=viewport]').attr('content');

if (_AndroidDevice){

    if (metaViewport.includes('initial-scale=1.001')) {
        metaViewport = metaViewport.replace('initial-scale=1.001', 'initial-scale=1.0');
    } else {
        metaViewport = metaViewport.replace('initial-scale=1.0', 'initial-scale=1.001');
    }

    $('meta[name=viewport]').attr('content', metaViewport);
}

希望这会有所帮助。