使用 CSS 的绝对大小答案

【问题标题】：Absolute sizing using CSS使用 CSS 的绝对大小
【发布时间】：2012-12-11 14:56:27
【问题描述】：

我知道 CSS 中有一些绝对尺寸单位可用。例如，cm、in、mm……但是当我在我的网页中使用它们时，它们很少受到尊重。

应从 EDID 获得有关屏幕物理尺寸和像素分辨率的信息 - 这样浏览器就可以访问它们并计算特定设备上 1 厘米内的像素数量。我说的是普通 CRT/LED/等离子屏幕，不是投影仪。

我想在移动设备上使用它。一个通用标准是每个触摸目标的尺寸至少为 9 毫米。但是当我在我的 CSS 代码中使用 height: 9mm 时，我的 HTC Desire HD 上的实际大小约为 3 毫米。

那么我怎样才能让浏览器使用绝对大小来显示元素呢？

【问题讨论】：

标签： javascript android html css android-browser

【解决方案1】：

你不能。无论出于何种原因，移动设备上的浏览器都会一致地告诉您宽度为1in（“一英寸”）的元素是 96 像素宽。实际分辨率是多少并不重要。他们都是这么说的。

解决问题的唯一方法是让设备制造商（和设备软件供应商）承担足够大小的“虚拟像素”的全部责任。换句话说，您必须信任 Apple、Google、Samsung、LG、HTC、摩托罗拉等，以向公众提供使您的 16 像素文本在用户正在查看的任何设备上都可以阅读的设备，无论涉及多少真实像素带有一个 16 像素的字形。

有时候，你会输；新的 iPad Mini 就是一个很好的例子，因为它报告的屏幕尺寸与 iPad 2 相同，但屏幕要小得多。这意味着您在 iPad 2 上清晰的 16 像素在 iPad Mini 上非常小。您的网页几乎不可能确定它是在 iPad Mini 还是 iPad 2 上（设计使然！Apple 是这样设计的故意）所以最终结果是不幸的购买者制造商对 iPad Mini 的服务不佳。

相比之下，Nexus 7 平板电脑的实际屏幕分辨率高于 iPad Mini，但它向您的网页报告的屏幕尺寸更小。这意味着您在该设备上的 16 像素文本看起来很棒 — Nexus 7 的所有者已经得到了该制造商的良好服务。

（您当然可以提供允许用户调整布局的工具。对于响应式网站，由于各种浏览器特性（错误），很难让一个可捏合的网站运行良好/可使用熟悉的移动设备手势进行缩放。）

【讨论】：

您对 96dpi 成为移动设备的标准有何参考？我发现只有大约 96dpi 的资源在 Windows 上是标准的。我想在我的论文中引用该参考资料。
我去看看；我已经阅读了有关它的各种博客文章，并且通过经验证明它当然很容易。请注意，它在现实中明确不是 96dpi - 事实是设备将1in 视为96px，无论像素实际有多大。
所以基本上，如果我想在网页上显示 9mm，我需要知道我在什么设备上。但是该信息不包含在 http 请求中 - e.a. iPad 和 iPad 迷你。所以我搞砸了 - 除了向用户询问他们的设备之外，我无法获得实际的 dpi。
依赖 96dpi 似乎并不正确 - 大约 99% 的移动设备具有更高的 dpi。太糟糕了，用户的手指也无法缩放到 96dpi。 :-)
是的，这是一个奇怪的情况，但这就是现实。大多数现代设备会告诉您“设备像素比率”，但这只报告实际屏幕像素和“虚拟”像素之间的比率（CSS 中的1px）。但是，仍然不能帮助您了解实际的屏幕尺寸。

【解决方案2】：

这在很大程度上取决于设备设置。在许多情况下——出于“兼容性原因”——真正的互操作性已经与将产品推向市场进行了交易。

或者换句话说：设备供应商为他们的客户固定网站，以便他们可以“按照他们所知道的方式”上网。

Your Desire HD:

对角线厘米（英寸）：11 (4.3)

分辨率：480×800

ppcm (PPI)：85 (217)^*

CSS 像素比：1.5

^* 基于给定显示尺寸的近似计算。

如果您看到该列表，您可以想象每个设备的情况都不同。所以你不能相信设备本身。

如果您想解决这个问题，您需要为您的用户提供一种配置方式，以便您可以采用。一些供应商/浏览器提供标题，告诉这些设备做真实的事情。这一切都取决于，我手头没有很好的资源来轻松地在全球范围内解决这个问题。我会从研究不同的模型及其浏览器软件开始，然后创建一个矩阵（如果有一些通用程序可用并且它们是否可以一起工作）。

在此之前，我只会要求用户使用真实设置，但会根据用户偏好对 body 元素进行采用设置。

【讨论】：

【解决方案3】：

有两个基本因素使9mm 不同于 9 毫米的物理测量值。

首先，在显示设备中，anchor unit（如 CSS Values and Units Module Level 3 中所述）通常是像素，mm 单位被解释为等式1in = 25.4mm = 96px 满意。（即使在印刷媒体中，mm 原则上应该锚定到物理毫米，它也有所偏离。）对此您无能为力。

其次，在移动设备中，浏览器通常会自动缩放页面。原因是，否则大多数页面会表现得非常糟糕，因为它们是为更大的屏幕设计的（即使就每个方向的像素数而言）。这可以使用像

这样的标签来防止

<meta name="viewport" content="width=device-width, initial-scale=1">

只有在页面确实设计为适应各种视口大小（包括小尺寸）时才应使用此选项。

【讨论】：

【解决方案4】：

如果这些真实世界的测量结果永远可靠，那么只有在用于打印格式时才会如此。任何电子产品都会以像素为单位进行思考，而不是这些像素根据实际测量值转换为什么。例如，当您将设备插入具有不同分辨率和 DPI 的投影仪或外接显示器时，cm 和 mm 应该是什么意思？

哪个设备会跟踪 mm 和 cm 转换为什么？显示设备还是发送显示数据的设备？简直太乱了。 RL 测量仅用于打印，即使在那里，根据我的经验，它们也可能有点冒险。至少我几年前的经验是冒险的。

【讨论】：

【解决方案5】：

我想出了一个办法：大多数浏览器在用户代理标头中沿着 HTTP 请求发送设备类型。基于该信息，我可以在服务器上找出真正的 DPI 并将其发送回响应中（例如，作为修改后的 CSS）。

但是，保留和维护设备数据库以获得精确的 DPI 的成本很高。我最终使用了一组常用参数中的近似 DPI。在这种情况下，1 毫米不是恒定的，但应尽量减少差异（通常）。

【讨论】：