页面适合浏览器响应式设计视图中的宽度，但不适用于手机答案

【问题标题】：Page fits width in browser Responsive Design View, but not on phone页面适合浏览器响应式设计视图中的宽度，但不适用于手机
【发布时间】：2020-07-22 20:44:00
【问题描述】：

我只有一个没有媒体查询的简单页面，在响应式设计模式下看起来很棒，但在我的手机上却不行。

在响应式设计模式中，表格完全适合。（Safari、Chrome 和 Firefox）

但是，在我的 375 像素测试手机（iPhone 6s）上，最后一列（21 像素图像）不适合，必须水平滚动才能看到。（Safari、Chrome 和 Firefox）

我删除了手机缓存并确保 Safari 偏好设置中的页面缩放为 100%。

视口设置正确：

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

这可以修复吗？我希望问题不在于响应式设计编辑器，因为如果是这样，如果它们与实际手机不匹配，它们就不是很有用。

.dt { border-collapse:collapse; font:11px Arial; }

.dt caption {background:black; color:orange;}

.dt th {font-size:12px; background: gainsboro; border:1px solid silver; padding:4px;}

.dt caption+tbody tr:nth-child(2) td:first-child {background:white; font-weight:normal; font-size:11px; text-align:left}

.dt td {border:1px solid silver; padding:3px; text-align:center}

.dt div {width:21px; height:12px; background:lightgreen}

          <table class="dt">
            <caption>Title</caption>
              <tr>
                <th>Brand</th>
                <th id=AAcapacity>CapacityXF</th>
                <th>XF?</th>
                <th>1+2 star<br>
                  reviews</th>
                <th># reviews</th>
                <th>Price per 8</th>
                <th>Pic
                </th>
              </tr>
              <tr>
                <td>Raspberry</td>
                <td class="lg">2800</td>
                <td>-</td>
                <td>7%</td>
                <td>385</td>
                <td>$13.99</td>
                <td><div></div></td>
              </tr>
              <tr>
                <td>Blueberry</td>
                <td class="lg">2700</td>
                <td>XTC</td>
                <td>10%</td>
                <td>585</td>
                <td>$15.99</td>
                <td><div></div></td>
              </tr>
          </table>

【问题讨论】：

标签： css iphone mobile responsive

【解决方案1】：

我想通了。当我很久以前拿到手机时，我将其设置为设置 > 显示和亮度 > 显示缩放 > 视图 > 缩放，然后就忘记了。当时，我认为该设置只是将所有内容都放大了，但实际上它所做的是将 iPhone 6s 从 375 像素宽的显示屏变成了 320 像素宽的显示屏。我刚刚关闭了缩放，然后我得到了一个 375 像素宽的显示器，现在桌子可以正常放置了。

【讨论】：