Благодаря работе, проделанной компанией Apple, пользователи имеют превосходные интерфейсы, а разработчики экономят кучу времени, так как абсолютно любое устройство можно отличить от другого по Media Queries, тем самым создавая по-настоящему отзывчивые сайты.
iPhone 6 и iPhone 6+
/* iPhone 6 Портрет */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
}
/*iPhone 6 Альбом */
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
}
/*iPhone 6+ Портрет */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
}
/*iPhone 6+ Альбом */
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
}
/*iPhone 6 и iPhone 6+ Портрет и Альбом */
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){
}
/*iPhone 6 и iPhone 6+ Портрет */
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){
}
/*iPhone 6 и iPhone 6+ Альбом */
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){
}
Retina iPad в портретной ориентации
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2)
{
// CSS Styles
}
Retina iPad в альбомной ориентации
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2)
{
// CSS Styles
}
Retina iPad в портретной и альбомной ориентации
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2)
{
// CSS Styles
}
iPad в портретной ориентации
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
{
// CSS Styles
}
iPad в альбомной ориентации
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
{
// CSS Styles
}
iPad в портретной и альбомной ориентации
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
// CSS Styles
}
Ссылки
Источник: https://www.kobzarev.com/makeup/ios-media-queries/
