网路上iPhone 6 Plus的图片

Question

I'm pretty confused about generating images for the iPhone 6 Plus to make them look nice. Any questions on this site about it seem to be about images for an iPhone app, but I'm wondering about using images on the web. It would be a lot easier if I had an actual iPhone 6 and 6 plus to test with.

So, with the original iPhone, you upload an image to example.org and use it in your html. No problem, the image looks good. Then the iPhone 4 comes out. So you could simply make the image twice the size, and then scale it down with css so that it looks good on the retina device.

Enter iPhone 6 and iPhone 6 Plus. From what I can gather, the iPhone 6 has the same resolution as the iPhone 4, so the above method would work, right?

Now the 6 Plus. Looks like it 'renders at 3x' and then 'downsamples' to 1080 pixels. How exactly does that work?

Anyways, my biggest question: Will an image sized to @2x look fuzzy on an iPhone 6 Plus? Let's say we have this:

<img src="/img/sample.png" height="200" width="200">

If sample.png is 200x200, it will look fine on the original iPhone, and fuzzy on any retina devices. If it's 400x400, it will look good on original iPhone and retina devices. But will it need to be 600x600 to look good on the iPhone 6 Plus?

Answer 1

您可以尝试调整图像的大小，具体取决于您所在设备上屏幕的大小。