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

Question

In the code example below there are two cubes with styles for desktop and mobile.
on the iphone for example the cube should be green whereas on desktop it should be (and is) red.
On my iPhone in portrait view I get nothing, on landscape, it is red instead of green.
Same on the iPad.
On Google Chrome Developer Tools, when I choose Apple iPhone 5 Portrait, it doesn't show the media query in the Styles, as if it weren't recognising it or something.
What am I doing wrong?
/* 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

There is a syntax error:
(max-device-width: 767)
(max-device-width: 1024)
to
(max-device-width: 767px)
(max-device-width: 1024px)

Answer 2

Try something like this.
/* ----------- 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) {
}
For more details - CSS-Tricks