S
S
sergey2015-07-10 23:58:08
css
sergey, 2015-07-10 23:58:08

Correct parameters of media queries, what to do?

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 the question

In order to leave comments, you need to log in

1 answer(s)
M
Maksim Zverev, 2015-07-11
@zorro76

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.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question