尺度= 1的视口仅在用户缩放后填充屏幕的一部分（iPhone / iPod）

Question

我需要将可伸缩页面转换为受限制的面向移动的页面。为了实现它，我插入了<meta>标记：

<meta name="viewport" content="width=device-width, initial-scale=1,
                               minimum-scale=1, maximum-scale=1, 
                               user-scalable=no"/>

通常它运作良好，页面从此（左侧）转换为此（右侧）：

但是如果用户事先缩放页面，则视口设​​置为丑陋，如下所示。这里window.innerWidth == 319，document.body.clientWidth == 320。所以看起来视口也被缩小了。如果您将设备旋转到横向模式并返回，它会变得很好看（如上图所示）。但我找不到以编程方式修复它的方法。我试着

• 播放meta的内容，删除并再次添加元数据;
• 启用/禁用硬件加速;
• 为元素display和overflow更改属性position，body，html;

但没有帮助我。也许我需要一些这些神奇的词汇，我不知道。有趣的是，即使用户放大然后缩小返回页面的比例为1，问题也会发生。

以下是the test page，此处为its source。对于那些想要使用该页面的人，我建议关闭iOS Safari中的选项卡，然后再次打开一个新选项卡，因为浏览器有时会在刷新期间记住之前的比例（甚至在同一选项卡中重新输入URL）。 / p>

我现在不知道，所以你的想法会有所帮助。谢谢！