Несколько способов проверить разрешение устройства в CSS:

• grid. 1 Проверяет, является ли экран растровым (все современные экраны) или сеточным (старые телефоны или текстовые терминалы). 1 Значения: 0 для растровых экранов и 1 для сеточных экранов. 1
• resolution, min-resolution, max-resolution. 12 Проверяет разрешение устройства в dpi или dpcm. 1 Значение: число с нужными единицами измерения. 1 Например, @media (max-resolution: 300dpi) { …}. 1
• width, min-width, max-width. 1 Проверяет ширину окна браузера, минимальную или максимальную ширину. 1 Значение: положительное целое или дробное число с любыми доступными единицами измерения. 1 Например, @media (max-width: 1280px) { …}. 1

Также для управления разметкой в мобильных браузерах можно использовать метатег viewport. 2 С его помощью можно контролировать размер окна просмотра и масштаб. 2