我已经查看了这个问题的堆栈溢出主题，以及一些谷歌搜索结果，但我似乎无法解决我的问题。
我为移动设备(mobile.css)创建了一个样式表，该样式表本质上是我的main.css的一个副本，并对许多属性进行了更改。当我只加载mobile.css作为样式表，它在我的iPhone上看起来不错，就是我想要的。但是当我把两者都放在一起的时候，我正在混合两者，但是更多的是main.css
任何想法为什么？
<head> <link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" /> <link rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' /> <Meta name="viewport" content="width=device-width,initial-scale=1.0" /> </head>
解决方法
根据
documents，在特定设备/条件下加载另一个文件的语法是这样的：
<Meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" /> <link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />
这将为每一个宽度的宽度加载一个css文件
对于iPhone 4和具有Retina显示器的新一代iPod touch，您应该注意。 iPhone 4的宽度是640像素，许多开发者不会将这个宽度计算为移动浏览器宽度。如果您在文档中添加以下元标记问题将被解决
<Meta name="viewport" content="width=320">
