为什么我的自适应网站会在移动设备上放大？

Question

因此，我为一家虚构的公司创建了一个简单的登录页面，以便尝试css-grid，并尝试使该站点具有响应能力。首先，我尝试不使用媒体查询，但后来我认为在必要时进行媒体查询。问题是，每当我调整大小时，浏览器上的一切看起来就很好。一切都可以这么说。但是，当我通过手机访问该网站时，它就会放大。当您在devtools中尝试该站点并选择其他设备来尝试该站点时，也会看到相同的结果。

我认为可以通过添加<meta name="viewport" content="width=device-width, initial-scale=1.0">标签来解决此问题。但这并不能解决问题。

You can visit the site here and play around with it

and here is the repo where you can check out the code

Answer 1

您的网站似乎达到了最小宽度。我在计算机上的浏览器中打开了它，并调整了窗口大小，随着页面越来越小，标题中的单词似乎正确地换行了。但是，当窗口变得太小时，它们将停止包裹。我怀疑这可能是由最小宽度引起的。

---

查看回购中的CSS代码，看来grid-template-columns可能是最小宽度的原因。也许这行：
grid-template-columns: repeat(3, minmax(150px, 300px));

特别是要在移动设备上查看网站，我建议在页面下方一直留一列。很难在移动设备（例如电话）上以纵向方向将多个列彼此相邻放置，而不会使每个列都变得“压扁”。

Answer 2

在.articles-container的CSS中，行grid-template-columns: repeat(3, minmax(150px, 300px));。

这将最小网格列宽度设置为150px。在移动屏幕上，这将是3 x 150像素，因此比屏幕宽度还要宽。