如何用CSS让Firefox实现Chrome的min-width视口缩放行为？

给定代码：

body, html {min-width: 300px}

以及viewport设置：

<meta name="viewport" content="width=device-width" />

当前现象：

• Chrome：将响应式视图从300px缩小至200px时，页面会随视口宽度同步缩放
• Firefox：缩小到200px时，页面保持300px的最小宽度，出现横向滚动条

要在Firefox中实现Chrome的缩放行为，可以尝试以下方案：

方案1：调整viewport元标签 #

给viewport添加minimum-scale属性，允许页面缩小到适配更小的视口宽度：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.66">

这里的0.66是按200px/300px计算的最小缩放比例，你可以根据需求调整为更小的值，确保能覆盖需要的最小视口宽度。

方案2：转移min-width约束到内部容器 #

移除html和body上的min-width，把这个约束放到页面的内部主容器，同时给html和body设置宽度和溢出控制：

html, body {
  width: 100%;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

/* 替换成你实际的主容器类名 */
.page-container {
  min-width: 300px;
}

这种方式下，当视口宽度小于300px时，内部容器会超出视口，但html和body会隐藏横向溢出，不会出现滚动条。

注：如果要完全模拟Chrome的自动缩放行为，仅靠CSS无法实现（Firefox默认遵循规范，不会自动缩放页面），此时需要配合JavaScript监听视口变化，动态计算并设置缩放比例。

内容的提问来源于stack exchange，提问作者Tom