When talking about CSS media, the difference between device width and width could be muddled. So let us expound on it a little more.
Understanding Your Phone’s Screen and Resolution
When talking about device-width, this basically refers to the width of the gadget. Simply speaking, this is the screen resolution of your device. For example, you have a device with a screen resolution of 1080p x 1920p. What this actually means is that, there is 1920 pixels across the screen. Therefore, it has a device width of 1920px. These days, majority of the smartphones have device-width of 720px as the standard with some of the flagship devices from leading manufacturers have phones with resolution going up to 2160p or near 4k.
Where the Trend Goes?
The trend is now packing higher screen resolutions even in a small form factor. The colors it produce and sharpness of texts and images are what the consumers are at.
And this is what manufacturers are trying to deliver.
Speaking of sharp texts and images, there’s this thing called PPI or Pixel Per Inch. It is one of the biggest aspects of creating a beautiful screen size. And R&Ds of different companies are continuously researching on how they can pack more pixels in an inch.