Question

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

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

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

编辑：只是想到我添加的网站是原始大小的1000 * 800容器，我只是希望它在屏幕变大时增长一点

Answer 1

我认为实现您正在寻找的内容的最佳方式是使用媒体查询和transform : scale();属性。您可以详细了解Here

Answer 2

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

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

Answer 3

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

path_sort=sorted(os.listdir(path),key=lambda x: int(x.split('w')[0]))
for i in path_sort:
    fi=os.path.join(path_sort, i)
    return os.path.basename(fi)[-12:]

等。你可能可以解决它

您可以使用fi=os.path.join(path_sort, i)

加载它

Answer 4

要自动缩放整个页面，一种解决方案是使用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。

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

4 个答案: