将固定宽度调整到移动设备视口中

Question

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

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

我尝试过使用viewport并通过javascript设置初始比例（获取屏幕宽度，计算比率，将视口内容设置为“width = device-width，initial-scale = calculated-ratio”），但它主要不是'按预期工作。

有没有人有这方面的现实解决方案？

Answer 1

好的，我们已经弄明白了。看来，当您在视口元标记中设置初始比例时，您无法通过JS更改它。因此解决方案是仅使用宽度放置视口：

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

然后，在此行的正下方放置一个脚本，以适当的缩放比例更新视口：

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

这就是你如何将固定宽度的页面放入移动视口：）

Answer 2

检查您是否正在寻找这个......？ 使用媒体查询首先使宽度为100％，然后在设备宽度大于600px时设置宽度：600px。

[Demo ](http://jsfiddle.net/H9MWM)

Answer 3

尝试头脑：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />

确保用户无法缩放使用