将固定宽度适应移动设备视口

Question

我在各处都看到这个问题，但找不到跨设备、跨浏览器的解决方案。

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

我尝试使用视口和通过javascript设置initial-scale（获取屏幕宽度，计算比例，将视口内容设置为“width=device-width，initial-scale=calculated-ratio”），但它大多数情况下并不能像预期的那样工作。

有人有一个实际的解决方案吗？

- Pawel.W

---

当浏览器宽度小于600像素时，您想将其缩小吗？ - cJ_

Answer 1

好的，我们已经找到了解决方法。看起来，当你在viewport meta标签中设置initial-scale时，就无法通过JS更改它。因此，解决方案是仅使用宽度放置viewport：

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

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

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

那么这就是如何将固定宽度页面适应移动设备屏幕的方法 :)

- Pawel.W

---

比率未定义，viewportElement未定义。如何修复？ - stiv

@stiv：对我来说解决方案是使用<meta name="viewport" content="width=device-width"> var viewportElement= document.querySelector("meta[name=viewport]"); var ratio = window.innerWidth/600; viewportElement.setAttribute( 'content', 'initial-scale=' + ratio );。 - Sanxofon

Answer 2

请在head标签中添加以下代码：

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

使用以上代码可以确保用户无法缩放页面。

- Gour Gopal

Answer 3

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

首先将宽度设置为100％，然后在设备宽度大于600px时将其设置为width: 600px。

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

- cJ_

---

嘿cJ_，谢谢，但这与媒体查询和100%宽度无关。页面本身是固定宽度的，所有元素都采用绝对定位，所以100%并不适用于这里。 - Pawel.W