Как настроить таргетинг на iPad и iPhone, но исключить Android - PullRequest
Новая
       2

Как настроить таргетинг на iPad и iPhone, но исключить Android

0 голосов
/ 03 апреля 2012

Я искал этот ответ, но не могу его найти. У меня есть только iPhone и iPad - у меня нет Android - поэтому я не знаю, касается ли мой CSS даже Droid?

Вот что у меня есть в моем HTML и CSS:

HTML 

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0">

CSS 

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
... CSS for iPad landscape
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) { 
... CSS for iPad portrait
}

@media only screen and (max-device-width: 480px) { 
... CSS for iPhone portrait and landscape
}

Вопросы:

  1. Есть ли определенный метатег для Droid?
  2. Имеет ли CSS-код, указанный выше, адрес Droid? Если так, есть ли способ, которым он может быть изменен так, чтобы Дроид его игнорировал?
  3. Есть ли онлайн-эмулятор для Droid, чтобы я мог устранять неполадки?

Пример страницы можно посмотреть здесь: http://www2.receivablesxchange.com/alternative-to-factoring-4

1 Ответ

3 голосов
/ 03 апреля 2012

Медиа-запросы предназначены для области отображения и типа.Он не смотрит на пользовательский агент или что-то в этом роде.Что вы можете сделать, это примерно так с JQuery + CSS: 

var _device = {};

if (navigator.userAgent.match(/iPad/i)) {
    _device.name = 'ipad';
    _device.type = 'mobile';
} else if (navigator.userAgent.match(/android/i)) {
    _device.name = 'android';
    _device.type = 'mobile';
} else {
    _device.type = 'desktop';
}

$('body').addClass(_device.name).addClass(_device.type);

Теперь, в вашем CSS, вы просто добавляете класс body, соответствующий вашим потребностям: 

@media only screen and (max-device-width: 1024px) { 
    .ipad #myDiv {
        // css for #myDiv only seen on the iPad
    }

    .android #myDiv {
        // css for #myDiv only seen on the Android
    }

    .mobile #myDiv {
        // css for #myDiv available to iPad AND android but NOT desktop
    }
}
...