媒体查询设备宽度和 "regular" 宽度不起作用

Question

在下面的代码示例中，有两个具有桌面和移动样式的多维数据集。例如，在 iphone 上立方体应该是绿色的，而在桌面上它应该是（并且是）红色。在我的 iPhone 纵向视图中，我什么也看不到，在横向视图中，它是红色而不是绿色。在 iPad 上也一样。在 Google Chrome Developer Tools 上，当我选择 Apple iPhone 5 Portrait 时，它不会在样式中显示媒体查询，就好像它没有识别它或其他东西一样。我做错了什么？

/* for desktop */
@media only screen and (min-width: 400px) and (max-width: 767px) {
 #block2 {width:100px;height:100px;background:red;} 
}
/* for iPhone */
@media only screen and (min-device-width:320px) and (max-device-width: 767) {
 #block2 {width:100px;height:100px;background:green;} 
}
/* for desktop */
@media only screen and (min-width: 960px) and (max-width: 1024px) {
 #block {width:100px;height:100px;background:red;} 
}
/* for iPad */
@media only screen and (min-device-width:768px) and (max-device-width: 1024) {
 #block {width:100px;height:100px;background:green;} 
}

<div id="block"></div>
<div id="block2"></div>

Answer 1

尝试这样的事情。

/* ----------- iPhone 5 and 5S ----------- */
/* Portrait and Landscape */
@media only screen and
(min-device-width: 320px) and (max-device-width: 568px) and
 (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
 and (min-device-width: 320px) 
 and (max-device-width: 568px)
 and (-webkit-min-device-pixel-ratio: 2)
 and (orientation: portrait) {
}

 /* Landscape */
 @media only screen 
 and (min-device-width: 320px) 
 and (max-device-width: 568px)
 and (-webkit-min-device-pixel-ratio: 2)
 and (orientation: landscape) {

 }

更多详情 - CSS-Tricks

Answer 2

存在语法错误：

(max-device-width: 767)
(max-device-width: 1024)

至

(max-device-width: 767px)
(max-device-width: 1024px)

媒体查询设备宽度和 "regular" 宽度不起作用

media query device-width and "regular" width not working

css

iphone

ipad

media-queries

device