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

Question

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

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

有没有办法强制非移动浏览器以类似的方式扩展？我已经尝试过元标记和 CSS zoom 属性，但到目前为止，它们都无法在标准桌面浏览器上运行。有什么想法吗？

Answer 1

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

示例:

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