为什么Google Chrome模拟器会以375x667分辨率显示iPhone 6？ [英] Why does Google Chrome emulator show iPhone 6 at 375x667 resolution?
问题描述
我正在尝试以编程方式调整我的网站的图像大小以适应不同大小的设备。但现在我无法确定我实际需要的尺寸。在谷歌Chrome模拟器中，我看到一些图像升级，例如在iPhone 6上从230x230自然到357x357显示。该图像几乎占据了模拟屏幕的整个宽度，看起来略微降低，表明iPhone 6的宽度不会大于357像素。
但了解当从通常距离（手臂的长度）观察时，一个CSS像素应始终接近1/96英寸（或0.26 mm）。
他们不遵守信中的规范，因为这意味着 1px 恰好是信件的1/96高DPI设置中的一个真实英寸，这在任何浏览器AFAIK中都没有实现。然而，他们试图通过使一个CSS像素等于两个或更多设备像素来实现非常高的像素密度，使CSS像素不那么微小。
Chrome设备模式适用于 CSS像素，这是您应该用来设计文本，导航栏，标题等，而不是高分辨率图像。对于这些，请阅读下一部分。
如果您没有注意到，上图显示Chrome设备模式确实显示设备规模（有多少设备像素等于一个CSS像素）。
修复图像分辨率
正如您所知，这会对图像产生负面影响，因为浏览器也会缩放图像。您的230x230 CSS像素图片使用相同的质量，变为460x460 设备像素。要解决此问题，请使用 srcset 属性，为浏览器提供指向同一图像的不同分辨率文件的链接。
示例（改编自上面的链接）：
< img src =wolf-400.jpgsrcset =wolf-400.jpg 400w， wolf-800.jpg 800w，wolf-1600.jpg 1600w>
iPhone 6会看到它并想哦，我假装 375px 宽但我实际上 750px ，所以我会下载 wolf-800.jpg 。
为了兼容性，不要忘记使用 src =。此外，除非您使用 sizes =，否则浏览器将默认为设备的整个宽度。
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 230x230 natural to 357x357 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 750x1334! 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 640x960 pixels. Chrome emulator again shows it at half those dimensions, 320x480.
This stackoverflow question says that "the iPhone screen is 320x480 definitely."
What am I missing here? Why do some sources (including Apple) supply dimensions that are twice what Chrome emulator (and my images) say?
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.
这篇关于为什么Google Chrome模拟器会以375x667分辨率显示iPhone 6？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
