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

【问题标题】：Fit fixed width into mobile device viewport使固定宽度适合移动设备视口
【发布时间】：2014-09-08 11:21:03
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

试一试：

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

为了确保用户不能缩放使用

【讨论】：

【解决方案3】：

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

当设备宽度大于600px时，先设置宽度100%，然后设置width:600px。

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

【讨论】：