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

Question

到处都在阅读有关此内容的信息，但找不到跨设备，跨浏览器的解决方案。

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

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

有人为此提供现实解决方案吗？

Answer 1

好的，我们已经解决了。 看来，当您在视口meta标签中设置初始比例时，您将无法通过JS进行更改。 因此，解决方案是仅以宽度放置视口：

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

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

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

这样便可以将固定宽度的页面放入移动视口中：）

Answer 2

检查您是否正在寻找...？ 使用媒体查询

首先将宽度设为100％，然后在设备宽度大于600px时设置width：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" />

为了确保用户无法缩放使用