Медиа-запрос, чтобы отличить рабочий стол от iPad в альбомном режиме - PullRequest
Новая
       3

Медиа-запрос, чтобы отличить рабочий стол от iPad в альбомном режиме

7 голосов
/ 16 ноября 2011

Я создаю сайт с адаптивным дизайном.Мне нужно различать макет между планшетом в ландшафтном режиме и рабочим столом с медиа-запросами.Это медиа-запросы прямо сейчас: 

<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 в альбомной ориентации имеет ширину 1024px, это обычное разрешение для ПК.Как с медиа-запросами я могу отличить 1000px широкий декстоп от планшета в альбомном режиме?

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"/>

не решает проблему.

1 Ответ

4 голосов
/ 17 января 2013

Я планирую использовать Detectizr, плагин для Modernizr

https://github.com/barisaydinoglu/Detectizr

Например, 

// adds html class: 'desktop', 'tablet' or 'mobile' to aid styling
Modernizr.Detectizr.detect({ detectDeviceModel: false, detectScreen: false, detectOS: false, detectBrowser: false, detectPlugins: false });

// hack: for some reason, modernizr is chopping off the 'mobile' part off the 'ui-mobile' class needed by jquery mobile
$("html").removeClass("ui-");
$("html").addClass("ui-mobile");

Окончание HTML-тегом выглядит примерно так:1009 * 

<html lang="en" class="js tablet ui-mobile    landscape">

И использовать классы «рабочий стол» и «планшет», чтобы помочь стилизации

...