Разрешение браузеров смартфонов

По моему опыту, в большинстве случаев вы можете получить желаемые результаты, если правильно все структурируете и просто сосредоточитесь на ширине устройства.

Ширина устройства — это истинная мера пикселей на смартфоне или планшете, цифры разрешения обычно удваиваются для устройств с сетчаткой.

Правильное структурирование означает:

(1) Включите в заголовок документа свой метатег

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

при желании вы можете предотвратить масштабирование с помощью

<meta name="viewport" content="width=device-width, user-scalable=no" />

(2) В CSS используйте медиа-запросы, например

@media (max-width: 480px) {
  ...
}

@media (max-width: 767px) {
  ....
}

@media (min-width: 768px) and (max-width: 979px) {
  ...
}

@media (min-width: 1200px) {
  ...
}  

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

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

Удачи!