iphone - CSS 媒体查询无法在 iPhone 4 上正确加载

Question

我遇到媒体查询无法加载 CSS 或无法正确显示样式的问题。

我所做的是为我的 iPhone 创建一个 style480.css，为 normal 创建一个 style.css。

我加载了

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

在我的网站上，这样它才能正常工作。

我将主站点上的 css 设置为读取样式 480，这样我就可以为 iphone 设计样式。在我的 iphone 上一切看起来都很棒，当然在我的桌面上它只是一个无聊的列表。

完成 style480 后，我将 css 复制/粘贴到

@media only screen and (max-width: 480px) {
{ 
    body {width:100%;}
} 

在我的风格 CSS 中。

听起来很标准。

但是它在我的 iPhone 上的格式不正确

顶部导航菜单(我使用 html 5 <nav> )被推到左边，一些列表在不应该的时候 float 。

这就像 iphone 混合了媒体查询内外的元素。

我什至试过将媒体查询放在顶部，将其放在底部并加载

-webkit-min-device-pixel-ratio : 1.  

同样的事情，就像是在混合css。

我什至尝试在 HTML 上单独加载 css 文件……完全一样。

让我的 iphone css 正确加载的唯一方法是将它设置为页面的主 css。当我加载 2 套 css 时，它在 iphone 上不工作(但它在我的笔记本电脑上工作)

如果我能找到一种从 iphone 查看 css 的方法，我也许能够弄清楚它在做什么，但直到他们我才知道为什么它没有正确加载 CSS

Answer 1

It is like the iphone is mixing elements from in and outside the media query.

嗯，是的，这就是它的工作原理。将使用媒体查询之外的内容，除非媒体查询内部直接覆盖它。您不应该将所有代码都粘贴到媒体查询中，而只是您要针对该分辨率调整的内容。

媒体查询不会取代您的主要 CSS 文件，而是对其进行补充。