【发布时间】：2014-05-21 17:14:30
【问题描述】：
我有一个奇怪的问题，希望有人能帮忙。
我设计了这个响应式site，它工作得很好，但在手机上它做了一件奇怪的事情。在最终站点之前，因为它会在一个小屏幕上看到，它加载了几毫秒，站点全部搞砸了，侧边栏在主要内容上方，但之后它加载了正确的布局。 我对此并不太担心，但后来我意识到在 iphone 上你只能看到混乱的网站，而不是应有的正确布局。
我的媒体查询是这样的：
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:50px) and (max-width:479px)" href="css/screen-layout-small.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:480px) and (max-width:767px)" href="css/screen-layout-medium.css">
<link rel="stylesheet" type="text/css" media="only screen and (min-width:768px) and (max-width:959px)" href="css/screen-layout-large.css">
<link href='http://fonts.googleapis.com/css?family=Dosis:200,300,400' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=2">
希望有人可以提供帮助，因为我在这里有点发疯了。谢谢！
【问题讨论】：
-
我想我修好了。我将媒体查询从 html 更改为 css，并专门使用 @media (device-height: 568px) 和 (-webkit-min-device-pixel-ratio: 2) {} 解决了 iphone，它似乎现在可以工作了
-
我也面临同样的问题..你能告诉我你是怎么解决的吗？