Почему шрифты на мобильных устройствах больше?
Единицы измерения rem пробовали?
learn.javascript.ru: Единицы измерения
Сегодняшняя статья с хабра: Руководство по HTML/CSS/JavaScript
У вас head присутствует мета тег с вьюпортом?<meta name="viewport" content="width=device-width, initial-scale=1">
Если нет, тогда понятно почему не срабатывает.
Браузер телефона по умолчанию старается придать странице первозданный вид, как-будто смотрим страницу на декстопе и ставит width=980px, к примеру. Это называется Область просмотра, размер браузера другими словами. Посему медиа запрос срабатывает для данной ширины.
Есть еще Площадь изображения, это фактический размер экрана устройства. Обозначается как device-width.
Метатег, написанный выше, говорит браузеру, чтобы при прорисовке учитывалась площадь изображения (device-width).