Why does Google Chrome emulator show iPhone 6 at 375x667 resolution?

Question

I\'m trying to programmatically adapt my website\'s image sizes for differently sized devices. But now I am having trouble telling what sizes I actually need. In Google Chrome e

Answer 1

Relax, you're about to understand this mess. Just notice that 2 * 375x667 = 750x1334.

A pixel is not a pixel

The key thing is: one device pixel is different from one CSS pixel.

They are the same in low pixel density devices like your computer screen (96 dpi). However, high pixel density devices like smartphones and printers (upwards of 160 dpi) try to obey the general W3C CSS3 spec understanding that one CSS pixel should always be close to 1/96th of an inch (or 0.26 mm) when viewed from usual distance (arm's length).

They don't obey the spec to the letter, since that would imply 1px being exactly 1/96th of one real inch in high DPI settings, which wasn't ever implemented in any browser AFAIK. However, they try to make their CSS pixels not so minuscule despite very high pixel densities by making one CSS pixel equal to two or more device pixels.

Chrome Device Mode works with CSS pixels, which is what you should use to design text, navbars, headings etc, but not high-resolution images. For these, read the next section.

^{If you didn't notice, the image above shows that Chrome Device Mode does show you the device scale (how many device pixels equal one CSS pixel).}

Fixing image resolution

As you already know, this affects images negatively, since the browser scales the image as well. Your 230x230 CSS pixels picture becomes 460x460 device pixels, using the same quality. To fix that, use the srcset attribute to give the browser links to different resolution files of the same image.

Example (adapted from the link above):

An iPhone 6 will look at that and think "oh, I pretend to be 375px wide but I'm actually 750px, so I'll download wolf-800.jpg."

Just don't forget to use src="" for compatibility. Also, unless you use sizes="", the browser will default to the full width of the device.