我已经查看了这个问题的堆栈溢出主题，以及一些谷歌搜索结果，但我似乎无法解决我的问题。
我为移动设备(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">
此元标记会影响您的图像质量。如果你想解决这个问题，那么你需要阅读这个here。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
