时间戳

首页 > 解决方案 > 为什么 iPhone CSS 断点不起作用

css - 为什么 iPhone CSS 断点不起作用

问题描述

我正在尝试使用 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 中测试了代码。感谢所有帮助。

标签： cssiphonebreakpoints

解决方案

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

推荐阅读