在非移动浏览器中缩放视口

我的一个客户要求我们在一个固定宽度的网站上添加侧边栏，这将使网站的整体宽度对于许多小型笔记本电脑显示器来说太大了。理想的解决方案是使用响应式布局，我们可能会在未来的某个时候这样做，但现在我们正在寻找一个快速修复。在移动设备上，解决方案非常简单，因为我们可以使用视口设置:

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

是否有办法强制非移动浏览器以类似的方式缩放?我尝试过meta标签和CSS zoom属性，但到目前为止，它们都不能在标准桌面浏览器上工作。什么好主意吗?

使用媒体查询根据视图宽度调整内容大小(响应式布局)并不难做到。https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

示例:

@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}

正如上面的链接所提到的，您可以在<html>或<body>标签上使用CSS scale()转换函数来缩放整个页面:

html {
  transform: scale(.5);
  -webkit-transform: scale(.5);
  -moz-transform: scale(.5);
  -ms-transform: scale(.5);
  -o-transform: scale(.5);
}

你需要做一些技巧来让页面在视窗中正确对齐，但这是一般的想法。

相关内容