为什么 iPhone CSS 断点不起作用

Question

我正在尝试使用 CSS 媒体查询为我的 iPhone 12 Mini 和我伙伴的 iPhone 12 Pro Max 创建断点来创建一个响应式网站。我从几个不同的站点发现以下视口宽度都证实了同一件事：

iPhone 12 Mini viewport width is 375px
iPhone 12 Pro Max viewport width is 428px

以下是我的css代码：

// iPhone 12 Mini
@media screen and (max-width: 375px) {
    .wine-list h1 {
        font-size: 1rem;
    }
}

// iPhone 12 Pro Max
@media screen and (min-width: 376px) {
    .wine-list h1 {
        font-size: 2rem;
    }
}

以上代码在两台设备上都运行过一次。

但是，当我对 min-width 值进行一个小的更改时，断点停止正常工作并开始使用主 css 文件。所以我把它改回来了。但是这两种设备仍然拒绝适当地中断。 我不明白。这似乎违背了计算机科学的所有法则。 如果它以前有效，为什么它不再有效？我忽略了什么？

我直接在 iPhone 设备上测试网站，我不使用任何模拟器。我在 Safari 和 Chrome 中测试了代码。感谢所有帮助。

Answer 1

代码被破坏是因为我使用 // 而不是 /* */ 来评论。 CSS 技术上应该永远不要使用 // 来评论任何东西。我不敢相信我忽略了这一点。我早该知道事情是如此简单。 ‍♂️ 现在一切都适用于所有浏览器。

为什么 iPhone CSS 断点不起作用

Why are iPhone CSS Breakpoints not working

css

iphone

breakpoints