В чём отличие между шириной экрана и шириной устройства?

Question

[Максим Каракулов]

В статьях и в общении с верстальщиками не в первый раз слышу упоминания о том, что есть ширина экрана, а есть ещё ширина устройства. И эти оба свойства даже используются в css. Подскажите, в чём между ними разница и как эти два свойства участвуют в разработке адаптивной вёрстки? Почему недостаточно только ширины экрана?

Answer 1

[pigah]

Насколько я понял вы имеете ввиду физическое расширение и програмное

Answer 2

[Назар Мокринский]

В том, что на мобильных между ними нет ничего общего. То есть вы можете задать viewport 800 пикселей ширины несмотря на то, что дисплей FHD.

На мобильных с этим вообще всё сложно, но главная суть в том, что пиксель на дисплее не обязательно равен 1px в CSS.

Вы можете задать браузеру что вся ширина это не то, что он себе подумал, а 800 пикселей. Таким образом относительно легко укрупняются все элементы сайта (если они векторные - то качества не теряют при этом), некоторые элементы прячутся/перестраиваются и получается мобильная версия сайта.

Answer 3

[SergeyKot]

Для выяснения того, как там на вашем мобильнике (компе) на самом деле, у меня имеется специальный тест www.cotonti.mobi/aa.html

В последнее время, жизнь стал портить devicePixelRatio таких трубок с этим мало, но их все больше. К сожалению, это будет большой проблемой, так называемых адаптивных сайтов.