CSS Media Queries и My Nexus One (или другие телефоны Android)

Итак, у меня есть 2 телефона: Android Nexus One и дешевое простое устройство Android, которое я купил примерно за 100 долларов в розницу.

Я пытаюсь сделать свой веб-сайт удобным для мобильных устройств, используя @media и CSS (на самом деле я использую стилус и Node.JS, поэтому код может выглядеть немного забавно).

Поэтому я добавил следующее в свой стиль

//trial 1
@media (max-width:480px)
  display none
//Trial 2
@media (resolution: 163dpi)
    display none
//Trial 3
@media (-webkit-device-pixel-ratio:0.75)
  display none
//Trial 4
@media screen and (max-width:480px)
  display none

Сначала я думал, что у моего экрана просто сверхвысокое разрешение, но ничто из этого не помогает и менее дорогому устройству. Кажется, в моем браузере все работает нормально, поэтому я в тупике.

Спасибо!


node.js android css stylus media-queries
person Jackie    schedule 13.05.2012    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Попробуйте добавить этот тег meta в <head> вашего html:

<meta name="viewport" content="width=device-width,initial-scale=1">
person tw16    schedule 13.05.2012
comment
Так что просто для уточнения, если есть другие, использующие jade, это будет мета(name=viewport, content=width=device-width,initial-scale=1). В это время max-device-width 480px работает СПАСИБО! - person Jackie; 14.05.2012

arrow_upward
0
arrow_downward

Попробуйте из этого списка, надеюсь, это поможет:

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {

}
/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {

}
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

}
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {

}
/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {

}
/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {

}
/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

}
/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {

}
person Roko C. Buljan    schedule 13.05.2012

arrow_upward
0
arrow_downward

Как говорит tw16, вам нужно width=device-width, чтобы браузер не претендовал на большее разрешение. С другой стороны, в последних версиях Stylus это также допустимо:

.foo
  display block
  &
    @media (max-width:480px)
      display none
    @media (resolution: 163dpi)
      display none
    @media (-webkit-device-pixel-ratio:0.75)
      display none
    @media screen and (max-width:480px)
      display none

Который компилируется в:

.foo {
  display: block;
}
@media (max-width:480px) {
  .foo {
    display: none;
  }
}
@media (resolution: 163dpi) {
  .foo {
    display: none;
  }
}
@media (-webkit-device-pixel-ratio:0.75) {
  .foo {
    display: none;
  }
}
@media screen and (max-width:480px) {
  .foo {
    display: none;
  }
}

Я считаю, что это помогает сохранять медиа-запросы, связанные со спецификацией.

person Linus Thiel    schedule 15.05.2012