CSS在特定设备上不一致

Question

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

我一直在通过奥丁项目来提高我的前端开发技能，所以我创建了计算器项目。我的计算器使用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

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

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

并且可以在上面用于高度计算的CSS中找到。在我添加代码之前，它就有这个问题，但我在CSS技巧上读到，该解决方案可以用来解决与iOS地址栏相关的视口问题。

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

提前感谢

Charlie Tobler

Answer 1

我认为这是因为在使用"；视网膜"；显示。

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

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

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

您可以在MDN上阅读更多关于它的信息：使用视口元标记控制移动浏览器上的布局

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