@superproger

Как подключить файл стилей одновременно для ipad в горизонтальной ориентации и монитора(1024px), при том, что у них одинаковая ширина?

В общем есть сайт, к которому делается мобильная версия с помощью подключения стилей через media в тэге link, для полной версии задаю min-width: 1025px, а для мобильной max-width: 1024px(если задать в обоих 1024-получается наложение стилей и выглядит это, мягко говоря - не очень), сайт на мобильные адаптирован только для горизонтального просмотра, поэтому у айпада в горизонтальном положении ширина 1024 px, также есть мониторы, ширина которых тоже равна 1024px, как можно подгружать мобильные стили для айпада при ширине в 1024px, и полную версию стилей для монитора шириной 1024px?
  • Вопрос задан
  • 420 просмотров
Пригласить эксперта
Ответы на вопрос 3
CrewCut
@CrewCut
Коплю силы на переезд в тропики
В стилях для iPad пропишите (orientation: landscape). Т.е:
@media (max-width: 1024px) and (orientation: landscape) {
/* стили для айпада */
}
Ответ написан
@superproger Автор вопроса
CrewCut

Вы меня немножко не так поняли, но это моя вина, суть в том, что я прописываю медиа прямо в тэге линк
<link rel="stylesheet" type="text/css" href="<?=$_SERVER['ROOT_DIR']?>/css/style.css" media="(min-width: 1024px)">
  <link rel="stylesheet" type="text/css" href="<?=$_SERVER['ROOT_DIR']?>/css/style-mob.css" media="(max-width: 1024px) and (orientation: landscape)">


И когда я прописываю так для монитора 1024px грузятся обе версии стилей, для ipad получилось, но монитор не понимает, что 2 не нужно грузить и воспринимает landscape на себя тоже.
Ответ написан
Sticher78
@Sticher78
Вам в помосчь mobiledetect.php, который автоматически добавляет класс к body, при определении мобильных устройств.

Ну, и можно ещё подключить определение браузера (что не всегда корректно) - Каждому браузеру - свой CSS-файл
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы