CSS媒体查询不能正确加载在iPhone 4上

Question

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

我所做的是为我的iPhone和style.css创建一个style480.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>）被越来越推到左边，几个名单被悬空时，他们不应该。

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

我甚至试图把媒体查询放在上面，把它在底部和装载

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

同样的事情，它就像它是混合的CSS。

我甚至尝试在HTML上单独加载css文件......完全相同的东西。

我可以让我的iphone css正确加载的唯一方法是如果我将它设置为页面的主要CSS。当我加载2套css它不是在iphone上工作（但它在我的笔记本电脑上工作）

如果我能找到一种方法来查看从iPhone的CSS我可能能够弄清楚它是什么但直到他们我不知道为什么它不正确加载CSS

Answer 1

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

嗯，是的，这就是它的工作原理。媒体查询之外的内容将被使用，除非内的直接覆盖媒体查询。你不应该把所有的代码都放到媒体查询中，只是你想调整这个分辨率的东西。

媒体查询不会替换您的主CSS文件，它会对其进行补充。