Я создаю веб-сайт с адаптивным дизайном. Мне нужно различать макет между планшетом в альбомном режиме и настольным компьютером с медиа-запросами. Это медиа-запросы прямо сейчас:
<link href="base.css" rel="stylesheet"/>
<link href="desktop.css"
media="only screen and (min-width: 801px)" rel="stylesheet"/>
<link href="tablet.css"
media="only screen and (min-width: 629px) and (max-width: 800px) and
(orientation:portrait),
only screen and (min-height:629px) and (max-height:800px) and
(orientation:landscape)" rel="stylesheet"/>
Проблема в том, что desktop.css
включен для планшетов в альбомной ориентации. iPad в альбомной ориентации имеет ширину 1024 пикселей
, это стандартное разрешение для ПК. Как с медиа запросы могу ли я отличить 1000px
широкий dekstop от планшета в альбомном режиме?
PS Я должен использовать медиа-запросы, потому что веб-сайт будет кэширован / CDNed и т. д. Любое обнаружение на стороне сервера не будет работать .
PS2.
<link href="desktop.css"
media="only screen and (min-width: 801px),
not only screen and (min-height:629px) and (max-height:800px) and
(orientation:landscape)" rel="stylesheet"/>
не решает проблему.