Используя Media queries по размеру экрана можно определить на какое iOS устройство загружена страница.
/* Desktop large × large */
@media all and (min-device-width: 1025px){
body:before{ content:"Desktop"; }
}
/* iPad 1024 × 768 */
@media all and (max-device-width:1024px) and (min-device-width:481px) and (orientation:landscape){
.ipad:before{ content:"iPad landscape"; }
}
@media all and (max-device-width:768px) and (min-device-width:321px) and (orientation:portrait){
.ipad:after{ content:"iPad portrait"; }
}
/* iPhone retina 640 × 960 */
@media all and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:480px) and (orientation:landscape){
.iphone-retina:before{ content:"IPhone Retina landscape"; }
}
@media all and (-webkit-min-device-pixel-ratio: 2) and (max-device-width:320px) and (orientation:portrait){
.iphone-retina:after{ content:"IPhone Retina portrait"; }
}
/* iPhone 320 × 480 */
@media all and (max-device-width:480px) and (-webkit-max-device-pixel-ratio: 1) and (orientation:landscape){
.iphone-tft:before{ content:"IPhone TFT landscape"; }
}
@media all and (max-device-width:320px) and (-webkit-max-device-pixel-ratio: 1) and (orientation:portrait){
.iphone-tft:after{ content:"IPhone TFT portrait"; }
}
Источник
Комментариев нет:
Отправить комментарий