使固定宽度适合移动设备视口

Question

到处都在读这个，但找不到跨设备、跨浏览器的解决方案。

我们有一个固定宽度 = 600px 的页面，我们希望它始终适合设备宽度。例如，在 480px 分辨率下，它会被缩放 0.8，在 320px 上它会被缩放 0.533。

我已经尝试过使用视口并通过 javascript 设置初始比例（获取屏幕宽度，计算比例，将视口内容设置为“宽度=设备宽度，初始比例=计算比例”），但它大多不起作用预期的。

有没有人对此有实际的解决方案？

Answer 1

好的，我们已经想通了。看来，当您在视口元标记中设置初始比例时，您将无法通过 JS 更改它。所以解决方案是放置一个仅具有宽度的视口：

<meta name="viewport" content="width=600">

然后，直接在此行下放置一个脚本以使用适当的比例更新视口：

viewportElement.setAttribute( 'content', 'initial-scale=' + ratio );

这就是您将固定宽度页面放入移动视口的方式:)