html - 使固定宽度适合移动设备视口(viewport)

Question

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

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

我已经尝试使用视口(viewport)并通过 javascript 设置初始比例(获取屏幕宽度、计算比率、将视口(viewport)内容设置为“width=device-width、initial-scale=calculated-ratio”)，但它大多不会没有按预期工作。

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

Answer 1

好的，我们已经弄明白了。看来，当您在视口(viewport)元标记中设置 initial-scale 时，您将无法通过 JS 更改它。所以解决方案是放置一个只有宽度的视口(viewport):

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

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

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

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