媒体查询设备宽度和“常规”宽度不起作用

Question

在下面的代码示例中，有两个具有桌面和移动样式的立方体。 例如，在 iphone 上，立方体应该是绿色的，而在桌面上它应该是（并且是）红色的。 在我的 iPhone 上，纵向视图我什么都没有，在横向视图中，它是红色而不是绿色。 在 iPad 上也一样。 在 Google Chrome 开发者工具上，当我选择 Apple iPhone 5 Portrait 时，它不会在 Styles 中显示媒体查询，就好像它没有识别它一样。 我做错了什么？

/* 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)