Блог

Главная - Вопросы по программированию - CSS: целевой Galaxy Tab 3 только с медиа-запросами

CSS: целевой Galaxy Tab 3 только с медиа-запросами

#css #media-queries

#css #медиа-запросы

Вопрос:

Я просто хочу настроить таргетинг с помощью медиа-запроса на Galaxy tab 3. В соответствии с его разрешением (1280 x 800) оно должно быть:

 @media (max-device-width: 800px) and (orientation: portrait) {  
 }

@media (max-device-width: 1280px) and (orientation: landscape) { 
}

Проблема в том, что некоторые iMac имеют такое же разрешение, и мое исправление Galaxy Tab 3 влияет на это устройство. Как-нибудь не повлиять на imac?
Заранее спасибо

Ответ №1:

К сожалению, нет способа выполнять медиазапросы для конкретного устройства, но решение есть. С точки зрения практического дизайна, чем отличаются iMac и Galaxy Tab, если они имеют одинаковое разрешение? Их DPI. Это то, что вы можете запросить! В соответствии с http://tablets.findthebest.com/l/232/Samsung-Galaxy-Tab-3-7-0 это 169 ppi.

 @media (max-device-width: 800px) and (orientation: portrait) and (min-resolution: 169dpi) { }
@media (max-device-width: 1280px) and (orientation: landscape) and (min-resolution: 169dpi) { }

Возможно, вам также потребуется выполнить -webkit-min-device-pixel-ratio , но я не могу сказать вам, какое соотношение по умолчанию для вкладки (возможно, 1,5, но вы можете проверить здесь: http://bjango.com/articles/min-device-pixel-ratio / )

 @media
    (max-device-width: 800px) and (orientation: portrait) and (min-resolution: 169dpi),
    (max-device-width: 800px) and (orientation: portrait) and { }
@media
    (max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: #) (min-resolution: 169dpi),
    (max-device-width: 1280px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: #) { }
Метки: