如何将视口动态设置为页面限制

我有一个宽度为1200px的页面（但可以更改）。我已经得到了我不能改变视口即：如何将视口动态设置为页面限制

<meta name="viewport" content="initial-scale=1, width=device-width">

我试图写一个脚本在那里，如果你来的页面，其中一个设备超过601px宽不足1025px宽的屏幕将缩小到页面宽度。目前设备将加载页面并显示第一个768px，然后用户必须缩小才能看到剩余的1200px。

这有点什么，我想：

if(window.innerWidth > 600 && window.innerWidth < 1024){ 
    var defaultDeviceWidth = window.innerWidth; 
    var defaultPageWidth = document.getElementById('wrapper').offsetWidth; 
    if(defaultDeviceWidth < defaultPageWidth){ 
    document.querySelector('meta[name="viewport"]').content = 'initial-scale='+ 
     (defaultDeviceWidth/defaultPageWidth)+ 
     ', maximum-scale='+(defaultDeviceWidth/defaultPageWidth)+ 
     ', user-scalable=yes'; 
    } 
}

将输出：

<meta name="viewport" content="initial-scale=0.64, maximum-scale=0.64, user-scalable=yes">

问题的，这是最大规模的缩小视图中移出，但不允许用户放大如果他们想要的话。

本质：

我想片缩小到页面的限制，因为如果你没有捏放尽可能会去使用JavaScript。

来源

2014-11-05 Matt Coady

我觉得一个流行的方法，以最适合的网站布局在所有设备上观众通过使用响应类（媒体查询，引导，jQuery的手机等）

其他方式加载动态CSS的样式可以使用刷新触发器以不同的设备分辨率加载特定的* .css。

在转换为HTML并显示在客户端之前，您是否曾经考虑过使用动态if-else在您检测到设备宽度之前回显不同的视口元标记？

来源

2014-11-05 00:46:44 BOBO

通常我会选择其中一种解决方案，但在这种情况下，我需要一个动态的JavaScript解决方案。 – 2014-11-05 01:33:08

如何将视口动态设置为页面限制

回答

相关问题