html - 为什么我的响应式网站在移动设备上会放大？

Question

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

我认为这个问题可以通过添加 <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));

具体来说，对于在移动设备上查看网站，我建议在页面下方一直设置一列。很难在手机等移动设备上将多个列彼此相邻放置，而不会使每个列都变得“太压扁”。