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

Question

我有一个我正在本地工作的网站，它将通过投影仪显示以进行演示。有没有办法让我将其缩放到投影的全尺寸，或者是否可以在更大的屏幕上显示它而无需使用所有媒体查询！我尝试添加：

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

但我认为它不会起作用！欢迎您提供任何意见

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

Answer 1

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

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

Answer 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);加载它

Answer 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) + ')');
});

这是一个小提琴。