在大显示器上正确缩放网站答案

【问题标题】：Scale website correctly on big monitors在大显示器上正确缩放网站
【发布时间】：2016-02-29 18:28:34
【问题描述】：

我有一个正在本地开发的网站，它将通过投影仪进行演示。有没有办法让我将它缩放到投影的全尺寸，或者如果它要显示在更大的屏幕上而不必使用所有的媒体查询！我尝试添加：

<meta name="viewport" content="initial-scale = 1.0,maximum-scale = 1.0" />

但我不认为它会成功！欢迎您的任何意见

编辑：只是想我会补充一点，该网站位于原始大小的 1000*800 容器中，我只是希望它在屏幕变大时增长一点

【问题讨论】：

无法通过javascript（或其他任何东西）判断投影屏幕有多大
您可以在首次加载页面时放大和缩小，[ctrl]+wheel 或 [ctrl]+[=]
您可以使用本问答中的方法获得一些帮助：Constructing a responsive website

标签： javascript html css

【解决方案1】：

如果使用 Bootstrap，则将所有内容包装在容器流体 div 中将使用全屏宽度（因此也使用投影宽度）。

<div class="container-fluid">
...// content
</div>

【讨论】：

感谢您的评论，但我没有使用引导程序，并且网站位于 1000*800 的容器中，我只是希望每次屏幕变大时它都会增长一点

【解决方案2】：

如果分辨率超出特定分辨率，我会尝试获取浏览器窗口分辨率并相应地设置宽度和高度。

<script>
    function setContentSize(){        
         var ww = window.innderWidth;
         var wh = window.innderHeight;

         ID.style.width = 1000 +"px";
         ID.style.width = 800 +"px"; //ID must be set in HTML
         if(ww > what you want ){
             ID.style.width = what you want +"px";
         }
    }
</script>

等等。你应该可以解决的

你可以用window.addEventListener("resize", setContentSize);加载它

【讨论】：

非常感谢您的回答伙伴，不过那样不会把内容弄乱了吗？
@J.Doe.Smith 没问题 :) 你是什么意思？取决于你想要它。通常内容会自动流动到它所在的 div 的大小。

【解决方案3】：

要自动缩放整个页面，一种解决方案是使用transform: scale()。该页面需要位于容器内才能正常工作。首先在css中为容器设置原点：

div#page-container {
  transform-origin: 0 0;
}

然后用 javascript（在我的例子中是 jQuery）更改比例因子：

$(function() {
  var ratio = $('div#page-container').width() / $(document).width();
  $('div#page-container').css('transform', 'scale(' + (1.0 / ratio) + ')');
});

这是Fiddle。

【讨论】：