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

Question

[superproger]

В общем есть сайт, к которому делается мобильная версия с помощью подключения стилей через media в тэге link, для полной версии задаю min-width: 1025px, а для мобильной max-width: 1024px(если задать в обоих 1024-получается наложение стилей и выглядит это, мягко говоря - не очень), сайт на мобильные адаптирован только для горизонтального просмотра, поэтому у айпада в горизонтальном положении ширина 1024 px, также есть мониторы, ширина которых тоже равна 1024px, как можно подгружать мобильные стили для айпада при ширине в 1024px, и полную версию стилей для монитора шириной 1024px?

Answer 1

[CrewCut]

В стилях для iPad пропишите (orientation: landscape). Т.е:

@media (max-width: 1024px) and (orientation: landscape) {
/* стили для айпада */
}

Comments

[superproger]

ниже ответил с кодом.

Answer 2

[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 на себя тоже.

Comments

[CrewCut]

Извините, а для чего Вы так загружаете?

[superproger]

CrewCut: боюсь спросить, а как надо то? Я всегда думал, что это классика и универсальный способ

[CrewCut]

superproger: Я обычно в едином файле css создаю все необходимые правила. Так быстрее загружается, удобней кешировать, минифицировать и отслеживать изменения. К тому же, удобнее работать с вьюпортом

[superproger]

CrewCut: а ссылочку с чуть более подробным описанием можно? Если имеется таковая конечно

[WhiteSama]

https://developer.mozilla.org/en-US/docs/Web/CSS/M...

[CrewCut]

superproger: WhiteSama неплохую ссылку дал, если на русском, можно тут почитать - htmlbook.ru/css/value/media

[superproger]

CrewCut WhiteSama: спасибо за ссылки, но я это уже изучал, а результата нет, какие бы я условия не задавал либо десктопная версия грузит мобильные стили, либо мобильная не грузит вообще никаких, разные варианты бывают, кроме правильных, никак не могу нужное сочетание подобрать, handheld вообще не работает, может оно не предназначено для планшетов

[CrewCut]

superproger: попробуйте те правила, что я в первом ответе написал, но в css файле. должно сработать

[superproger]

CrewCut: не могу никак доделать правильно, необходимо Ваши строчки вставить в основной css и с помощью тэга import подключить мобильные стили? То есть это будет примерно так:

@media (max-width: 1024px) and (orientation: landscape) {
	@import url ("css/style-mob.css");
}

Если так - что-то у меня не выходит(

[CrewCut]

superproger:
1. подключаете единый файл стилей.
2. пишите правило которое я оставил
3. вставляете внутрь код из css/style-mob.css

Не надо импорта, это затормозит загрузку

[superproger]

CrewCut: теперь стили подгружаются, но проблема в том, что они пересекаются, а мне нужно, чтобы основные только для ПК, мобильные для телефонов и планшетов

Answer 3

[Sticher78]

Вам в помосчь mobiledetect.php, который автоматически добавляет класс к body, при определении мобильных устройств.

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