window.screen.width
 

Подскажите, что означает это свойство?

Вроде это ширина экрана в пикселах.
Не зависит от размера окна браузера. Если сжать окно браузера, не меняется.

Но от чего она зависит? Если от монитора, то почему она не равна разрешению экрана?

window.screen.width=1024, а разрешение экрана у меня 1280 x 1024.

Выяснила, что это зависит от window.devicePixelRatio=1.25 у меня. То есть это отношение кол-ва физических пикселей (разрешение экрана, которое в панели управления отображается) к кол-ву логических пикселей в окне браузера. 1024*1.25=1280.
Другой вопрос, от чего оно зависит?

Это отношение разрешения в физических пикселях к разрешению в пикселях CSS для текущего устройства отображения, или размер одного пикселя CSS к размеру одного физического пикселя.

От установленной разрешающей способности, DPI (пикселей на дюйм), по умолчанию в Windows равно 96 DPI = 100%, что равно 1 для devicePixelRatio. devicePixelRatio = 1.25 = 125% = 120 DPI. Изменяется в параметрах экрана.

А у меня на Windows 7 devicePixelRatio = 1.25, и не меняется при изменении параметров экрана. Меняется window.screen.width, а devicePixelRatio остается 1.25.

Правый щелчок на столе -> Разрешение экрана -> Сделать текст и другие элементы больше или меньше -> Выбираем из трех: 100%, 125%, 150%.

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

И window.screen.width зависит от него. От того, на какой ты сайт заходишь, не зависит. А вот window.innerWidth уже зависит от конкретного сайта (если там width фиксирована, а не 100%) и от того, не сжал ли пользователь браузер. Но если на сайте стоит width=100% и браузер на весь экран, то window.innerWidth=window.screen.width, так?
Или на мобильных еще может быть иначе?

Можно еще в браузере ctrl+ масштаб увеличить - тоже devicePixelRatio меняет

window.innerWidth всегда будет равен window.screen.width, так как первое это размер окна включая и полосу прокрутки если она есть. Но, например, Full HD в Windows при 96 DPI, это window.innerWidth = window.screen.width = 1920, а при 120 DPI window.innerWidth/1.25 = window.screen.width/1.25 = 1536, при этом физически ширина монитора в пикселях как была 1920 так и осталась.

Нет, у OS понятий devicePixelRatio и CSS не существует. Что такое DPI/PPI и как это влияет на отображение можно почитать тут.

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

Да, понимаю, что devicePixelRatio не понятие OS, но отражает
"отношение разрешения в физических пикселях к разрешению в пикселях CSS".

Не, если в браузере увеличить масштаб, то window.innerWidth != window.screen.width (см. скриншот).


То есть если подкрутить масштаб в настройках экрана в Windows, то window.screen.width не соответствует разрешению экрана, установленному в OS.

А если подкрутить масштаб в самом браузере (зажать Ctrl и покрутить колесо мыши), то уже window.innerWidth != window.screen.width. Тоже число CSS пикселей в окне уменьшается из-за увеличения масштаба.


ЗЫ Ну и если окно браузера уменьшить, window.innerWidth уменьшится, а window.screen.width останется прежней

FF, масштаб 150%, window.innerWidth = window.screen.width = 1280 (при физическом 1920/96dpi). Картинок показывать не буду, верьте на слово. А браузер и не будет изменять никаких разрешений монитора, он просто пересчитывает под указанное разрешение устройства. Если создать картинку размером 400х400 с разрешением 300 DPI, то это будет размер примерно 21х21 см, а если с разрешением 96dpi, то примерно около 70х70 см. Также и экраном, как это и почему происходит по ссылке хорошо описано.

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