响应式表在移动设备上缩小答案

【问题标题】：Responsive Table Shrinking On Mobile响应式表在移动设备上缩小
【发布时间】：2016-10-14 02:22:33
【问题描述】：

我一直在创建一个用于添加到 WordPress 网站的表格。由于网站是响应式的，所以表格也应该有点。

所以我一直在创建我的表，并且在编辑器中（我使用 Visual Studio Code）它响应完美，但我认为我最好在 Chrome 中测试它。我保存了它，在 Chrome 中打开它，然后在打开移动视图的情况下检查它。

尽管在单元格上设置了min-width，它应该几乎填满了移动视图的宽度，但单元格几乎没有粘贴到中间标记。

所以我创建了一个如下的新表，同样的事情发生了。

<table border="1">
  <tr>
    <td style="min-width: 200px;">Min Width 200px</td>
    <td style="min-width: 300px;">Min Width 300px</td>
  </tr>
</table>

为什么要这样做？我该怎么做才能解决这个问题？

【问题讨论】：

FF 不收缩...
@dippas 那么 Chrome 有 bug 吗？
我在 2020 年遇到了同样的问题。我想如果这是一个错误，现在应该已经修复了。在响应模式下这种行为是否有原因？这似乎有点违反直觉，因为它会按比例缩小整个表格（以及里面的字体等），而不是让列水平缩小，同时保持清晰的字体大小......
@glitchform 请参阅下面接受的答案。这是由于不同的浏览器设置了不同的默认比例。通过声明比例，您可以覆盖这些默认值。

标签： html css responsive-design html-table

【解决方案1】：

我注意到 Chrome 在某些情况下开始在设备模式下缩小所有内容（我不确定确切的条件，所以如果有人知道，请加入）。

我通过将minimum-scale=1 添加到视口元值来修复它：

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

【讨论】：

安德烈，哇哇哇！！！你摇滚！！！！它有效，这就是我需要的！！！！！！