Media Query not working for iPhone and iPad - ios

Question

#media query is not working in case of iPhone 5 and iPad 4 OS. I have used following CSS for styling each OS and device for different screen.
I explicitly checked that my iPad and iPhone width and height and based on that only i have kept the media queries. This works fine on ANDROID OS.
/*#media print {*/
/* iPhone 5 (Portrait) */
#media screen and (max-device-height: 568px) and (orientation: portrait) {
#map_canvas {
border: 1px dashed #C0C0C0;
width: 290px;
height: 473px;
}
}
/* iPad 4 (Portrait) */
#media screen and (max-device-height: 1024px) and (orientation: portrait) {
#map_canvas {
border: 1px dashed #C0C0C0;
width: 735px;
height: 929px;
}
}
/* iPad 4 (Landscape) */
#media screen and (max-device-width: 1024px) and (orientation: landscape) {
#map_canvas {
border: 1px dashed #C0C0C0;
width: 990px;
height: 673px;
}
}
/* Samsung 10.1 inch (Portrait) */
#media screen and (max-device-height: 1280px) and (orientation: portrait) {
#map_canvas {
border: 1px dashed #C0C0C0;
width: 790px;
height: 1140px;
}
}
/* Samsung 10.1 inch (Landscape) */
#media screen and (max-device-width: 1280px) and (orientation: landscape) {
#map_canvas {
border: 1px dashed #C0C0C0;
width: 1230px;
height: 680px;
}
}
/* Samsung 7.0 inch (Portrait) */
#media screen and (max-device-height: 1024px) and (orientation: portrait) {
#map_canvas {
border: 1px dashed #C0C0C0;
width: 570px;
height: 875px;
}
}
/* Samsung 7.0 inch (Landscape) */
#media screen and (max-device-width: 1024px) and (orientation: landscape) {
#map_canvas {
border: 1px dashed #C0C0C0;
width: 990px;
height: 455px;
}
}
#media all and (orientation: landscape) {
html, body {
height: auto;
}
}
Each time i tested with various changes in above code, I am getting the LAST CSS being referred for applying the style.
I found one link, (which i have not yet tried but going to try soon as mac is available) but have question about that too (iphone/ipad media query issues). Can anyone explain the reason behind that Is pixel ratio matters in this case??

Answer 1

Excerpted from https://mislav.net/2010/04/targeted-css/
You should be aware that orientation media query, although supported on the iPad, doesn’t work on the iPhone (tested with v3.1.3). Fortunately, size queries like width and device-width work, so layout-switching is possible without JavaScript with some combination of those.

Answer 2

The reason is because the new Apple devices have a higher pixel ratio density. You should put this meta tag in the head of your document and your media queries will work everywhere:
<meta name="viewport" content="width=device-width">
By the way, the higher pixel ratio for the new apple products is called "retina display."
If you do have access the iPhone, ipad, etc... try viewing this website:
http://mattstow.com/viewport-size.html
on those devices to see the viewport size of the device. Then, add the meta tag, and you will see that the viewport size changes.