pixel / dot
is simply a unit of visual data. so for an image, design or whatever to be in the resolution of 1000 * 1000 simply means that it is defined by 1000 pixels height and 1000 pixels width.
now, how this is displayed/rendered i.e screen, print etc is not included in it’s own spec. hence, a pixel or dot inherently has no height or width.
now assume you wanna print this out on a paper. before you do, you’ve to specify the size of each indivual pixel, in order to properly print the image, or you could just specify how many dots laid out of flat are in 1 real world inch. hence, DPI.
so for a poster, you’d use 96dpi
https://learn.microsoft.com/en-us/archive/blogs/fontblog/where-does-96-dpi-come-from-in-windows
for a billboard banner, you’d maybe use 20dpi
obviously, lower the ppi, bigger the final print
screen
https://www.webdesignerdepot.com/2022/06/a-brief-history-of-responsive-web-design/
https://www.freecodecamp.org/news/a-brief-history-of-responsive-web-design/
we care about width throughout history cause websites, just like paper and other media we consume, are vertical scrolled anyways.
css pixel / logical pixel / js pixel
a unit for a developer to work with.
if no scaling by browser or OS, then it’s kinda the same as real physical pixel
else, it’s scaled too.
historically (no phones)
most monitors were around the same resolution of 800 * 600, same aspect ratio and same dimension, thus similar PPI.
hence, web developers would design website only for that standard.
websites would look the same on all devices.
then, you got diff res/size monitors
as high res monitors came along, you could fit more content. beginning of responsive design.
then, came smartphones with lower resolutions and diff aspect ratios
ex. iphone 1, res 320 * 480 on a 4inch screen
hence, responsive design took off and you rendered a diff layout for these devices
you would utilize css media queries, or js to get width in px of devices, which was pretty much the physical screen width/resolution in px too.
up until this point, dpi was not a concern as it was pretty much the same throughout all devices. and a css pixel = real physical pixel. the resolution was a good indicator of width. hence innerWidth etc.
then, smartphones increased dpis, and so did monitors
even a smartphone would then have a res of 1000px +, which would only be on monitors before. what to do?
viewport is basically something that was introduced, and it gives the virtual / css resolution of the device. ex phones are around 320 * 480 even though their physical resolution is lesser. this is handled by browser + os + device (via DPI, DPR etc).