Correct parameters of media queries, what to do?

Question

css

I did more than one adaptive layout using media queries. At the same time, in most cases, he adhered to the following structure:
media only screen and (min-width : 320px) and (max-width : 479px)
media only screen and (min-width : 480px) and (max-width : 629px)
media only screen and (min-width : 630px) and (max-width : 767px)
media only screen and (min-width : 768px) and (max-width : 849px)
media only screen and (min-width : 850px) and (max- width : 991px)
media only screen and (min-width : 992px) and (max-width : 1023px)
media only screen and (min-width : 1024px) and (max-width : 1199px)
mediaonly screen and (min-width : 1200px) and (max-width : 1379px)
media only screen and (min-width : 1380px) and (max-width : 1920px
) displaying the site on the ipad, its screenshots differed significantly from the image on the same deviceponsive.com or screenfly
. I wondered what was the matter, and caught myself thinking that for IOS devices, media queries are written differently. But how to do it so as not to produce already a bunch of media queries and so that they do not intersect with regular media queries?

Answer 1

They are written exactly the same.
iPad horizontal and vertical modes:

@media only screen  
and (min-device-width : 768px)  
and (max-device-width : 1024px) { ...}

iPad mini:

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1) {...}

If you do not have mac os, take a virtual machine, under vmware player, with the mac os image, install xcode, you can run the iPad simulator in it and see what is broken.