Question

我有一个固定宽度（1040像素）的页面。出于各种原因，我需要在iPad上锁定变焦，以纵向和横向模式显示页面的整个宽度。

我在orientationchange上触发了一个事件处理程序，其中包含以下代码：

if (isLandscape) {
    viewportMeta.content = 'width=1024,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0';
    console.log('--> landscape');
}
else {
    viewportMeta.content = 'width=768,initial-scale=0.75,minimum-scale=0.75, maximum-scale=0.75';
    console.log('--> portrait');
}
console.log('viewportMeta.content:');
console.log(viewportMeta.content);

此代码适用于初始页面呈现，即使我在页面呈现期间重新定向设备，但如果我在呈现页面后重新定向设备，则会失败：景观页面缩放为0.75和纵向页面缩放为1.0。

我正在阅读this old page（如何适用？）

不幸的是，当设备从纵向模式旋转到横向模式时，移动设备中的错误或更可能是错误功能会使其变得混乱。初始比例仅在整页加载时受到尊重。

我需要做些什么才能让移动版Safari尊重新的旋转缩放？我是否必须以某种方式强制重新渲染？

Answer 1

事实证明我的问题的解决方案比我预期的要简单得多，而且我甚至不需要javascript。（我正在使用的现有代码提高了我的期望。）

我只需要设置宽度，iPad就会自动处理缩放：

<meta id="viewport" name="viewport" content="width=1040,user-scalable=no">

BONUS：我在Android上试过这个并没有用。在这种情况下，需要在javascript中设置比例。

如何在iPad上锁定缩放以获得两个方向的整页宽度？

1 个答案: