Media Query not working for iPhone and iPad

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 di

Answer 1

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.

Answer 2

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.