CSS 在特定设备上不一致？

Question

我通常 Google 尽可能多，但我什至不确定如何着手研究这个问题。

我一直在通过 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;
}
}

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

所以我决定在响应式设计模式下点击iPhone按钮，果然很小。但是只要我手动调整 window 的大小，它就会按上面 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 技巧，该解决方案可用于修复与 iOS 地址栏相关的视口问题。

经过多次测试，我不知道为什么会这样，也不知道如何解决。谁能指出我正确的方向？

提前致谢，

查理·托布勒

Answer 1

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

在没有明确通知浏览器考虑更高密度显示的情况下，它会将 1px 视为 1px，使您的界面尺寸减半（因为 iphone 显示器适合两倍的像素到相同的 space).

将这个 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

此外，如果有人有更好的 explanation/technical 详细信息说明为什么会发生这种情况，请随时编辑我的 post。

CSS 在特定设备上不一致？

CSS inconsistent on specific devices?

css

responsive-design

frontend

mobile-website