Ios – Why does Google Chrome emulator show iPhone 6 at 375×667 resolution

imageiosscreen

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 emulator, I'm seeing some of my images upsized, e.g. on iPhone 6 from 230×230 natural to 357×357 displayed. The image takes up nearly the entire width of the emulated screen, and looks just slightly degraded, suggesting iPhone 6's width isn't much larger than 357 pixels.

But Apple says the iPhone 6 has a resolution of 750×1334! If that were true, the image should look much worse, I would think.

I've found some contradictory information on iPhone 4 as well.

This site talks about iPhone 4 at 640×960 pixels. Chrome emulator again shows it at half those dimensions, 320×480.

This stackoverflow question says that "the iPhone screen is 320×480 definitely."

What am I missing here? Why do some sources (including Apple) supply dimensions that are twice what Chrome emulator (and my images) say?

Best Answer

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):

<img src="wolf-400.jpg" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w">

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.

Related Solutions

Ios – How to develop or migrate apps for iPhone 5 screen resolution

Download and install latest version of Xcode.
Set a Launch Screen File for your app (in the general tab of your target settings). This is how you get to use the full size of any screen, including iPad split view sizes in iOS 9.
Test your app, and hopefully do nothing else, since everything should work magically if you had set auto resizing masks properly, or used Auto Layout.
If you didn't, adjust your view layouts, preferably with Auto Layout.
If there is something you have to do for the larger screens specifically, then it looks like you have to check height of [[UIScreen mainScreen] bounds] as there seems to be no specific API for that. As of iOS 8 there are also size classes that abstract screen sizes into regular or compact vertically and horizontally and are recommended way to adapt your UI.

Android – Image sizes and mobile devices and the dpi

The bitmap requirement is similar to preparing graphics for print vs. the Web. If you have any experience with print production, you’ll know that a 72 PPI image will look very pixelated and blurry when scaled up and printed. Instead, you would need to redo the image as a vector image or use a high-resolution photo and then set the file’s resolution at around 300 PPI in order to print it without any loss of image quality. Screen density for Android works similar, except that we’re not changing the file’s resolution, only the image’s size (i.e. standard 72 PPI is fine).

Don't increase any resolution in photoshop or gimp for changing your image keep 72ppi only.

just scale the image from baseline i.e mdpi=1.

75 × 75 for low-density screens (i.e. ×0.75); 
100 × 100 for medium-density screens (our baseline);
133 x 133 fpr TVDPI (1.33)(no need to supply graphics android will auto scale from hdpi) 213/160=1.33125
150 × 150 for high-density screens (×1.5);
200 × 200 for extra high-density screens (×2.0).