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

正在阅读有关此处的信息，但无法找到跨设备，跨浏览器的解决方案。将固定宽度固定到移动设备视口

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

我试过用viewport并通过javascript设置初始尺寸（获取屏幕宽度，计算比例，将视口内容设置为“width = device-width，initial-scale = calculated-ratio”），但它大部分不会没有按预期工作。

有没有人有这样的现实生活中的解决方案？

2014-07-17 Pawel.W

你想让它缩小时浏览器宽度小于600px的......？ –

好的，我们已经想通了。看起来，当您在视口元标记中设置初始缩放比例时，则无法通过JS对其进行更改。因此，解决办法是将一个视口只有宽度：

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

，然后直接在该行的地方一个脚本来更新与适当的缩放比例视：

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

所以这就是你如何适应固定宽度的页到移动视口:)

2014-07-18 07:59:00

检查您是否在找这个...？使用媒体querys

第一化妆宽度100％，然后设置宽度：600px的当设备宽度大于600px的更大。

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

2014-07-17 15:07:20

嗨cJ_，谢谢，但它不是关于媒体查询和100％宽度。页面本身是固定的宽度，它的所有元素都是绝对定位的，所以100％不是去这里的路。 –

尝试在头：

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

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

2018-02-09 20:26:26

回答