2

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

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

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

那么如何让浏览器使用绝对大小来显示元素呢?

4

5 回答 5

2

你不能。无论出于何种原因,移动设备上的浏览器都会一致地告诉您宽度为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 的所有者得到了该制造商的良好服务。

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

于 2012-12-25T21:32:33.297 回答
1

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

或者换句话说:设备供应商为他们的客户固定了网站,这样他们就可以“按照他们所知道的那样”上网。

你的愿望高清:

  • 对角线厘米(英寸):11 (4.3)
  • 分辨率:480×800
  • ppcm (PPI): 85 (217) *
  • CSS像素比:1.5

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

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

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

在那之前,我只会问用户,使用真实设置,但根据用户偏好对 body 元素进行采用设置。

于 2012-12-25T21:33:19.207 回答
1

有两个基本的东西9mm与 9 毫米的物理尺寸不同。

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

其次,在移动设备中,浏览器通常会自动缩放页面。原因是,否则大多数页面会表现得非常糟糕,因为它们是为更大的屏幕设计的(即使就每个方向的像素数而言)。可以使用类似的标签来防止这种情况

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

仅当页面确实设计为适应各种视口大小(包括小尺寸)时才应使用此选项。

于 2012-12-25T22:25:25.957 回答
0

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

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

于 2012-12-25T21:30:47.897 回答
0

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

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

于 2013-01-08T12:18:18.147 回答