@media配置高分辨率/ ipad / iphone

Question

我一整天都在试图解决这个问题。

当我将浏览器的大小调整为小于778px的宽度时，屏幕变黑。 （任何高度工作，只是宽度不配置）

我想要做的是添加一个实际显示我目前所拥有的移动@media设置！

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

任何想法我的代码有什么问题？通过我的CSS，我一直在下雨。

代码：http://jsfiddle.net/jwrg5/

非常感谢！

Answer 1

以下是应用媒体查询（Fiddle）的临床示例：

@media (max-width: 480px) {
    body {
        background: red;
    }
}

@media (min-width: 481px) {
    body {
        background: blue;
    }
}

样式表的功能如下：

• 当您的视口宽于480像素时，呈现蓝色背景
• 较窄的视口呈现红色。

请注意，使用max-width和max-device-width之间存在差异。后者为您提供了最大的设备宽度，这使您无法通过调整浏览器窗口大小来轻松测试查询。