воскресенье, 29 января 2012 г.

Media Queries для определения iOS устройства

Используя 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"; }
}
Источник

Комментариев нет:

Отправить комментарий