Показаны сообщения с ярлыком media queries. Показать все сообщения
Показаны сообщения с ярлыком media queries. Показать все сообщения

воскресенье, 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"; }
}
Источник