css max-device-width 800 не подходит для телефона Android

Question

Я делаю сайт, который должен выглядеть на мобильных устройствах не так, как на настольных компьютерах. Я тестирую его на Nexus-s - Android 2.3, если это актуально. Я установил метатег viewport на device-width.

В CSS я добавил правило @media all and (max-device-width: 800px), которое имеет все стили, специфичные для мобильных устройств. Но ничего из этого не применяется. Я сделал все это !important и вставил его как последний блок в файле css, но все равно он не работает.

Кто-нибудь испытывает что-то подобное?

Answer 1

У меня есть ширина экрана мобильного устройства тестовая страница для проверки различных разрешений экрана на мобильных устройствах.В моем HTC Desire правило ширины соответствует 800px, если я укажу initial-scale 0,67 в метапорте области просмотра.

Если установить width на device-width с initial-scale на 1.0в правиле CSS экран отображается как 533 пикселя.

Проверьте это на своем телефоне и посмотрите, поможет ли это с вашей страницей.

Answer 2

Вы положили это в шапку:

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