Почему заголовок не уменьшается в мобильном браузере?

Question

У меня есть раздел мультимедиа в http://androdevlab.com/style.css, который должен применяться к http://androdevlab.com при просмотре в мобильном браузере.В частности, логотип и шрифт основного заголовка должны стать намного меньше, но их нет.

Хотите знать, почему?

Answer 1

Ваш медиа-запрос тестирует (max-width: 780px), что не соответствует многим телефонам Android, которые обычно сообщают 800. Либо измените медиа-запрос на

@media only screen and (max-width: 800px) {

или используйте max-device-width.

Кроме того, вы можете добавить элемент HTML

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

, чтобы посоветовать мобильному браузеру использовать фактическое разрешение.