CSS 在特定设备上不一致？

Question

我通常会尽可能多地使用 Google 搜索，但我什至不知道如何着手研究这个问题。

我一直在通过 The Odin 项目来提高我的前端开发技能，所以我创建了计算器项目。我的计算器使用 CSS 网格来布局按钮和显示框，所以在我的脚本中，我考虑了计算器开始溢出屏幕的断点：

.calculator {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: 120px repeat(5, 100px);
justify-content: center;
align-content: center;
}

@media (max-width: 400px), (max-height: 620px) {
.calculator {
    grid-template-columns: repeat(4, 80px);
    grid-template-rows: 100px repeat(5, 80px);
}

button {
    font-size: 1.8em;
}
}

@media (max-width: 320px), (max-height: 500px) {
.calculator {
    grid-template-columns: repeat(4, 60px);
    grid-template-rows: 80px repeat(5, 60px);
}

button {
    font-size: 1.6em;
}
}

我在浏览器上使用响应式设计模式测试了断点；一切正常。然后我检查了我的手机，它没有工作。它比预期的要小得多。

所以我决定在响应式设计模式下点击 iPhone 按钮，果然它很小。但只要我手动调整窗口大小，它就会按上面 CSS 中的预期工作。

你可以在https://cstobler.github.io/calculator/自己测试一下

完整代码在我的 github https://github.com/cstobler/calculator

另一件事，您可能会注意到主体具有 --vh 样式属性。这是使用这个 JS 设置的：

const setVH = () => document.body.style.setProperty("--vh", `${window.innerHeight * 0.01}px`);

setVH();

window.addEventListener("resize", setVH());

并且可以在上面用于高度计算的 CSS 中找到。在我添加该代码之前就遇到了问题，但我在 CSS Tricks 上读到该解决方案可用于修复与 iOS 地址栏相关的视口问题。

经过大量测试，我不知道为什么会发生这种情况，也不知道如何解决。谁能指出我正确的方向？

提前致谢，

查理·托布勒

Answer 1

我认为这是因为在使用“视网膜”显示器的设备上发生了显示缩放。

如果没有明确通知浏览器考虑更高密度的显示，它会将 1px 视为 1px，使您的界面大小减半（因为 iphone 显示器在同一空间中容纳两倍的像素）。

将这个meta 元素放在页面的head 中，告诉浏览器适当的比例似乎可以解决问题。

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

您可以在 MDN 上阅读更多相关信息：Using the viewport meta tag to control layout on mobile browsers

另外，如果有人对为什么会发生这种情况有更好的解释/技术细节，请随时编辑我的帖子。