Адаптивность, @media-запросы

Пытаюсь написать адаптивность сайта с помощью @media-запросов. Использовать дополнительные библиотеки и фреймворки, кроме Bootstrap4 крайне нежелательно. Проблема заключается в определении устройства по пикселям (max- и min-width). Из-за плотности точек на моём телефоне гороздо больше пикселей, чем на ноутбуке, и поэтому сайт выводится некорректно. Как ещё можно определить устройство-просмотрщик?


Ответы (1 шт):

Автор решения: Ein

Можно использовать

<meta name="viewport" content="width=device-width, initial-scale=1">

Но если обходиться только медиа запросами, то можно проверить dpi при помощи resolution или соотношение сторон при помощи aspect-ratio

→ Ссылка