Медиа-запрос не работает в мобильном браузере?

Question

В настоящее время я работаю над мобильной версией веб-сайта, которая отлично работает в браузерах по умолчанию, таких как Firefox и Chrome. База представляет собой гибкий макет с медиа-запросом для максимальной ширины 440 пикселей (экран @media и (максимальная ширина: 440 пикселей) для целевого портретного режима.

Размеры шрифтов меняются в браузерах по умолчанию вместе с некоторыми другими настройками, такими как уменьшенные изображения и деления и т. Д. Однако, когда я тестирую сайт на своем телефоне HTC Android с браузером по умолчанию, он показывает только стиль максимальной ширины 440 вместо обычного стиль, основанный на ширине 480px.

В чем может быть проблема для такого поведения? Мобильная версия доступна по адресу https: //www.seeyouzoeningouda.nl/m

.

Не опубликовал CSS, потому что я действительно не знаю, какую часть кода вам показать. CSS основан на шаблонном шаблоне HTMl5 по умолчанию (www.html5boilerplate.com)

Answer 1

Какие мобильные устройства вы использовали для тестирования?
Если это Samsung Galaxy S3 или Apple Iphone 4, то их разрешение устройства было удвоено, и, следовательно, это может быть причиной того, что медиа-запросы не работают.

Так что для I-phone 4 попробуйте удвоить максимальную ширину с 480px до 960px и для Samsung Galaxy S3, если вы удвоите максимальную ширину с 360px до 720px при написании медиазапроса, тогда это может работать идеально.

например.
@ носитель для мультимедиа, экран и (максимальная ширина: 960 пикселей)
@ носитель для носителей, экран и (максимальная ширина: 720 пикселей)

Думаю, это может помочь вам выбрать режим портрета.

Answer 2

Мобильные устройства иногда нацелены на @media handheld. Попробуйте использовать @media all вместо экрана.