Как ориентировать Galaxy Nexus и Nexus 7 на медиа-запросы?

У меня есть два устройства, над которыми я тестирую дизайн сайта. Samsung Galaxy Nexus и планшет Asus Nexus 7. Мне очень сложно выяснить, как настроить таргетинг на отдельные устройства с помощью медиа-запросов. Я не уверен, какие значения использовать для max-width или использовать max-device-width. Также я не могу понять, какой порядок поставить медиа-запросы в...

В соответствии с: http://responsejs.com/labs/dimensions/

Galaxy Nexus Portrait: document.documentElement.clientWidth = 360
Galaxy Nexus Пейзаж: document.documentElement.clientWidth = 598
Nexus 7 Портрет: document.documentElement.clientWidth = 603
Nexus 7 Пейзаж: document.documentElement.clientWidth = 966

Мне нужно настроить таргетинг на следующее:

Портрет и планшет Galaxy Nexus
Портрет Galaxy Nexus
Планшет Galaxy Nexus
Портрет и планшет Nexus 7
Портрет Nexus 7
Планшет Nexus 7

Я попробовал следующее для тестирования, но не имел хороших результатов... Не уверен, что я делаю неправильно. Я как бы просто играл с цифрами, пытаясь понять, что сработало, а что нет...

/* Galaxy Nexus (portrait and landscape) ----------- */
@media only screen and (min-device-width : 360px) and (max-device-width : 598px) {
    ul.top-menu { background: red; }
}

/* Galaxy Nexus (landscape) ----------- */
@media only screen and (min-width : 361px) and (orientation: landscape){
    ul.top-menu { background: blue; }
}

/* Galaxy Nexus (portrait) ----------- */
@media only screen and (max-width : 360px) and (orientation: portrait) {
    ul.top-menu { background: purple; }
}

/* Nexus 7 (portrait and landscape) ----------- */
@media only screen and (min-device-width : 603px) and (max-device-width : 966px) {
    ul.top-menu { background: yellow; }
}

/* Nexus 7 (landscape) ----------- */
@media only screen and (min-width : 604px) and (orientation: landscape) {
    ul.top-menu { background: green; }
}

/* Nexus 7 (portrait) ----------- */
@media only screen and (max-width : 603px) and (orientation: portrait) {
    ul.top-menu { background: orange; }
}

И FYI Я знаю, что вы на самом деле не должны быть настолько конкретными, ориентируясь на отдельные устройства при выполнении адаптивного дизайна, но я делаю это в основном для тестирования и должен делать это в этом случае. Любая помощь будет оценена.

Ответы

Ответ 1

У меня есть Nexus 7, и я попробовал ваш sricpt. Проблема в том, что каждый браузер имеет другой видовой экран. Поэтому он имеет сложный результат.

@media only screen and (device-width : 800px) and (orientation: portrait) {
    #device:after {
        content: "Nexus 7 - portrait - firefox";
    }
}
@media only screen and (width : 603px) and (orientation: portrait) {
    #device:after {
        content: "Nexus 7 - portrait - chrome";
    }
}
@media only screen and (device-width : 1280px) and (orientation: landscape) {
    #device:after {
        content: "Nexus 7 - landscape - firefox";
    }
}
@media only screen and (width : 966px) and (orientation: landscape) {
    #device:after {
        content: "Nexus 7 - landscape - chrome";
    }
}

У меня нет времени на создание Opera.

Вы можете просмотреть результат здесь с помощью Nexus 7

Ответ 2

Для конкретной цели вы можете использовать:

@media only screen and (min-width : 600px) and (max-width : 603px) and (orientation: portrait) {
//Your CSS Here
}

Это получит связь 7, и если у вас есть вопросы, связанные с запросом на мультимедийные запросы iPhone, они будут оставаться в такте.

Ответ 3

Nexus 7 (v1) 2012

Mozilla/5.0 (Linux; Android 4.4.3; Nexus 7 Build/KTU84L) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.93 Safari/537.36

@media screen
resolution: 192dpi/2dppx
color: 8
-webkit-device-pixel-ratio: 2

orientation: portrait
  width: 600px/37.5em/158mm
  height: 791px/49.4375em/209mm
  device-width: 600px/37.5em/158mm
  device-height: 960px/60em/254mm
  aspect-ratio: 600/791
  device-aspect-ratio: 5/8 or 758/1000
orientation:landscape
  width: 960px/60em/254mm
  height:431px/26.9375em/114mm
  device-width:960px/60em/254mm
  device-height:600px/37.5em/158mm
  aspect-ratio:960/431
  device-aspect-ratio:8/5 or 2227/1000

Nexus 7 (v2) 2013

Mozilla/5.0 (Linux; Android 4.4.2; Nexus 7 Build/KOT49H) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.93 Sfari/537.36

@media screen
resolution: 127dpi/1dppx
color: 8
-webkit-device-pixel-ratio: 1.3312500715255737 or 1.3

orientation: portrait
  width: 601px/37.5625em/159mm
  height: 881px/55.0625em/207mm
  device-width: 601px/37.5625em/159mm
  device-height: 962px/60.125em/254mm
  aspect-ratio: 601/881
  device-aspect-ratio: 601/962
orientation: landscape
  width: 962px/60.125em/254mm
  height: 529px/33.0625em/114mm
  device-width: 962px/60.125em/254mm
  device-height: 601px/37.5625em/159mm
  aspect-ratio: 962/529
  device-aspect-ratio: 962/601 or 2221/1000

Ответ 4

Вы должны попробовать использовать сочетание дюймов для размеров экрана и px для плотности/пространства

С этим вы можете иметь четкую компоновку для галактики nexus И nexus 7 без связки линий для разрешения!!

// High end Android device
@media  screen and (min-width: 600px) and (max-width: 5in)
{

}
// nexus 7 and ipad mini
@media  screen and (min-width: 7in) and (max-width: 9in)
{

}

Вот статья об этом: http://ungeekautourdumonde.com/css3-tablette-desktop-mobile-la-guerre-des-media-queries/

Ответ 5

Следующий код работал у меня, чтобы настроить таргетинг на вкладку Nexus7.

/** Google Nexus7 (Landscape)**/
@media screen and (min-device-width : 601px) and (max-device-width :970px) {}

Не забудьте добавить метатег в свой html. Например,

<meta name="viewport" content="width=device-width"/>

Ответ 6

Медиа-запросы, которые работали для меня в Chrome на Nexus 7, были следующими:

@media only screen and (width : 600px) and (orientation: portrait) {

}


@media only screen and (width : 961px) and (orientation: landscape) {

}

Ответ 7

вы можете использовать выражение и для использования нескольких правил для одного и того же медиа-запроса

@media screen and (min-width: 998px) and (max-width: 999px)

задайте значение между 998px и 999px