CSS 移动网站 - 为什么值这么高？

Question

为了让我的 WP 网站适合我使用的手机

@media screen and (max-device-width: 780px) {}

但是，为了正确地适应所有内容，我必须使用巨大的值，例如 font-size: 4em;、header {height: 200px;}(当它为 100 时桌面版)。正常吗？

主要问题是 Gallery 插件 - 默认情况下拇指有大小，例如200x300，在移动版上它们真的很小!

或者也许有更好的方法让网站移动？

Answer 1

如果非要我猜的话，我会说你没有设置视口(viewport)

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

---

如今，大多数手机的 dpi 都非常高；例如，iphone 6 plus 有一个完整的 1080p 显示屏，所以当你制作 100px 高的东西时，它只有屏幕高度的 1/19。

通过将视口(viewport)设置为设备宽度，您是在告诉浏览器使用更标准的 dpi 呈现页面(例如，iphone 6 将类似于 424x600ish)。这样，您的所有内容都会自动缩放。