不同屏幕上的相同图像大小（物理）[重复]答案

【问题标题】：Same image size (physically) on different screens [duplicate]不同屏幕上的相同图像大小（物理）[重复]
【发布时间】：2012-11-28 03:37:00
【问题描述】：

可能重复：
How to detect page zoom level in all modern browsers?

我正在构建一个网站，其中的图片需要在每个设备或浏览器上具有相同的物理尺寸。假设图像完全适合 iPhone5 屏幕，即它的物理尺寸为 3.49x1.96 英寸（或 4" 对角线）。如果我在笔记本电脑的浏览器上查看它，它也需要具有 3.49x1.96 的尺寸英寸（显然分辨率较低）。在屏幕较小的 iPhone4 上，它甚至会切掉图像的某些部分。

我想我需要获取 PPI/DPI，然后进行相应的调整，即如果设备具有 iphone5 的 PPI/DPI，我需要将图像大小调整为 50%。不过，我有点困惑，是否还需要考虑屏幕分辨率，因为它可能会在非移动设备上发生变化。有谁能帮帮我吗？

在所有设备上实现这项工作的好方法是什么？

【问题讨论】：

您是否尝试仅使用 in 作为 CSS 的单位？它可能适用于一些设备。我预见到跨浏览器始终如一地实现这一目标将是一场噩梦......
你会发现你的目标是不可能的（此时）。
许多设备模拟器需要用户指定用户屏幕大小，请参阅 browserstack：browserstack.com/question/574

标签： javascript screen resolution dpi ppi

【解决方案1】：

我会使用 srcset 标签

<img src="foo-lores.jpg"
 srcset="foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x"
 alt="decent alt text for foo.">

2 和 6.5 是相对分辨率 *来源：HTML Doctor

【讨论】：