проблемы медиазапросов iphone / ipad

Question

У меня была проблема.Я собираю небольшой сайт, и по некоторым причинам мои медиа-запросы iphone и ipad сталкиваются.Iphone распознает стили Ipad, но не наоборот.Так что я хотел выложить то, что я использую, и посмотреть, сможет ли кто-нибудь помочь.

спасибо, ребята.

@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) //iphone
@media screen and (max-device-width: 480px) and (orientation:landscape) //iphone landscape
@media screen and (max-device-width: 1024px) and (orientation:landscape) //ipad landscape
@media screen and (max-device-width: 768px) and (orientation:portrait) //ipad portrait

Я взял это из нескольких уроков, которые казались довольно законнымиидеи, почему стили протекают?

Answer 1

Вы используете максимальную ширину устройства, которая также будет включать iphone.Должно быть:

@media screen and (max-device-width: 480px), screen and (-webkit-min-device-pixel-ratio: 2) //iphone
@media screen and (max-device-width: 480px) and (orientation:landscape) //iphone landscape
@media screen and (min-device-width: 1024px) and (orientation:landscape) //ipad landscape
@media screen and (min-device-width: 768px) and (orientation:portrait) //ipad portrait

обратите внимание на min-device-width