@media
и столкнулся с такой проблемой, если в браузере в режиме отладки при одинаковом вьюпорте (1112*731 (LC) + 834*1009 (PRT)) на win10 и на iPad Pro 10,5″ (2224×1668 пикселей, 264 пикселя на дюйм) некорректно отображается сайт. Имею ввиду, что в браузере норм, а на яблоке то там поехало, то тут...он вовсе не 2224×1668- в курсе. Поэтому писал:
при одинаковом вьюпорте (1112*731 (LC) + 834*1009 (PRT))
при одинаковом вьюпорте (1112*731 (LC) + 834*1009 (PRT))
min-device-width
, используйте min-width и/или max-width. Deprecated
This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Старайтесь писать media условия в одну сторону.Вроде так и стараюсь... Я пытаюсь понять как быстрее сделать подгонку именно с яблоком, ведь вроде как везде норм, а у яблока косяки лезут..
@media only screen and (orientation : portrait) and (min-device-width : 360px) and (max-device-width : 380px){}
@media only screen and (orientation : portrait) and (min-device-width : 320px) and (max-device-width : 360px){}
@media only screen and (orientation : portrait) and (min-device-width : 300px) and (max-device-width : 320px){}
@media only screen and (orientation : portrait) and (min-device-width : 768px) and (max-device-width : 1024px){}
@media only screen and (orientation : landscape) and (min-device-width : 768px) and (max-device-width : 1024px){}
@media only screen and (min-width : 800px) and (max-width : 1200px){}
@media only screen and (min-width : 800px) and (max-width : 1200px){}
@media only screen and (orientation : landscape) and (min-device-width : 768px) and (max-device-width : 1024px){}
Или это не верно?
не используйте ширину девайса, пишите просто ширину.- не понимаю...
@media only screen and (orientation : portrait) and (min-width : 768px) and (max-width : 1024px)
@media only screen and (orientation : portrait) and (min-device-width : 768px) and (max-device-width : 1024px){}
@media (min-width: 768px)
only screen and (orientation : portrait)
? я не вижу, где вашему дизайну модет быть важна ориентация.
И в вашем "дизайне" не вижу необходимости как-то учитывать ориентацию устройства.