У меня возникают проблемы с пониманием, почему, когда я проверяю элемент в своем браузере (просмотр на 100%), он дает мне размер пикселя, который отличается от скриншота, открытого в фотошопе. Как вы можете видеть из прикрепленного изображения. Что здесь происходит? В приложении вы можете увидеть информацию всплывающей подсказки браузера и фотошоп, и они отличаются. Если смотреть в браузере на 100%, то они обязательно должны быть одинаковыми. Пиксель есть пиксель, не так ли? Между прочим, мое разрешение экрана составляет 1920 x 1200, и скриншот, открываемый в фотошопе, является именно этим. Так врет ли мой браузер?
http://postimg.org/image/4l5f1gidn/ Если я отсканирую это изображение на 100% и открою его в Photoshop, оно говорит, что оно составляет 350 x 350 пикселей, что дополнительно составляет 75%. Я не могу объяснить это.
The sizes are always relative to the current element - if it is embedded on the next higher level and there the HTML (or the CSS) says 'stretch to fit', everything gets stretched accordingly. There could be multiple levels of that, so it is hard to predict how big it really will be at the end (one of the things that make coding a browser so tough).
Your example seems to be stretched by 75 %.
OK. The reason is that the device being used is a tablet (sort of, a Surface Pro 3). For some reason browsers do not render real pixels, instead 'relative' pixels. Whereas Photoshop calculates the actual pixels of an image.
It is the difference between whats called a "hardware" pixel and a "reference" pixel and this device has a "device-pixel-ratio" of 1.7
https://bjango.com/articles/min-device-pixel-ratio/ https://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio