android @media query width issue

Я прочитал хорошую статью по запросам @media, и теперь я пытаюсь использовать их для форматирования моего сайта на основе ширины браузера. Когда я тестирую свой Android-телефон (браузер Android 4.0), он, кажется, дает ширину 800 пикселей, когда фактическая ширина составляет 480. 800 будет шириной, если телефон вращается. Каков правильный способ определения текущей ширины в CSS?android @media query width issue

The CSS I used for testing: 

@media all and (max-width: 800px) { 
    div.testit800 { 
    display: block; 
    } 
} 

@media all and (max-width: 799px) { 
    div.testit799 { 
    display: block; 
    } 
} 

@media all and (max-width: 768px) { 
    div.testit768 { 
    display: block; 
    } 
}

HTML-:

<div class="testit800"> 
    max width 800 
</div> 
<div class="testit799"> 
    max width 799 
</div> 
<div class="testit768"> 
    max width 768 
</div>

Андроида всегда показывает: максимальная ширина 800 независимо от ориентации.

Обновление: Я нашел this page, который демонстрирует несколько способов определения ширины javascript. window.outerWidth работает для Android. Будет ли он в целом надежным для устройств и браузеров? Я понимаю, что мне пришлось бы отказаться от запросов @media, чтобы использовать его.

источник

2013-08-19 George

Возможный дубликат [CSS3 медиа-запросов не работает] (http://stackoverflow.com/questions/7859336/css3-media-queries-not-working) – cimmanon

Я прочитал это и использую предложенное , но это не меняет мой результат. – George

Я думаю, вы делаете это правильно, но, как показывает ваш код, у вас нет @media для ширины 480 пикселей.

@media all and (min-width: 480px) and (max-width: 599px) 
{ 
}

Этот код будет иметь диапазон пикселей от 480 (минимум) до 599 (максимум). Должно сработать.

Мой совет - всегда использовать процент, а не px, так как процент фиксирует размер экрана и пиксели фиксируются.

источник

2013-08-19 19:16:17

android @media query width issue

ответ

Смежные вопросы