Есть ответы на вопросы сертификации? Хочешь поделиться новостью о своем проекте? Тогда пиши нам!

CSS заготовка для адаптивной верстки под Apple iPad

CSS заготовка для адаптивной верстки под Apple iPad

Мы уже предлагали Вашему вниманию CSS сниппет для адаптивной верстки под Apple iPhone, в данном совете будет предложен CSS для верстки под Apple iPad.

Предложенные CSS сниппеты могут ускорить разработку адаптивного шаблона под планшеты компании Apple, тем более с включением нового фильтра от Google, желательно верстку адаптировать не только под различные размеры экрана ПК, но и планшетов и мобильных телефонов.

/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

Проверить результат можно, например, встроенными средствами браузера Chrome или специализированными сервисами, например, Responsinator.

 2107 CSS, Apple, iPad, Адаптивная верстка
28 апреля 2015
Команда BXCert

Наша команда разрабатывает портал BXCert, а также занимается разработкой сайтов на CMS 1С-Битрикс. Все участники являются сертифицированными специалистами Bitrix.

Возможно Вам будет интересно

Комментарии

Чтобы оставлять комментарии необходимо зарегистрироваться и пройти авторизацию.