Ну, как браузер распознаёт, это уже без разницы, это технология браузера(свои ява скрипты),
важно что все современные браузеры прекрасно работают с @media, а дальше ток задать нужные блоки медиа со своими размерами, и переопределить в них нужные стили.

А что делать не с современными браузерами?

Выход - это ява скрипты.

Но я не с этим.

Согласен, что медиазапросы хорошая вещь. И используя их можно многое сделать. Но всё-таки это не совсем адаптивный сайт получится, проглядывает дискретность:

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

…

}

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

…

}

@media screen and (min-width: 1200px) {

…

}

Кроме того, нет динамики, интерактивного режима. Так что я пришел к мысли попробовать вариант обойтись практически без CSS, тем более без медиазапросов - мне кажется это такая тоска.

Вариант - это ява скрипты. Легко проверить с чем работает программа. Потом можно задавать динамически стили и очень гибко.

Но я столкнулся уже с одной проблемой. Программе нужно постоянно отслеживать находится смартфон в горизонтальном или в вертикальном положении.

Пришлось поставить таймер, но он и для другой цели пригодится.

Главной проблемой я считаю, что не все браузеры поддерживают ява скрипты, хотя я точно не знаю какие это браузеры, может и не стоит обращать внимания.