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

Question

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

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

有没有办法强制非移动浏览器以类似的方式扩展？我已经尝试过元标记和 CSSzoom属性，但到目前为止都没有在标准桌面浏览器上工作。有任何想法吗？

score 0 · Accepted Answer

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

样本：

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

score 0 · Accepted Answer

正如上面链接中提到的，您可以在or标签上使用 CSSscale()转换功能来缩放整个页面：<html><body>

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

您必须做一些技巧才能使页面在视口中正确对齐，但这是一般的想法。

2 回答 2