我知道CSS中有一些绝对大小的单位。例如,cm,in,mm ......但是当我在我的网页中使用它们时,它们很少被尊重。
有关屏幕物理尺寸和像素分辨率的信息应该可以从EDID获得 - 因此浏览器可以访问它们并计算该特定设备上1厘米的像素数量。我说的是普通的CRT / LED /等离子屏幕,而不是投影仪。
我想在移动设备上使用它。通用标准是每个触摸目标的尺寸至少为9毫米。但是当我在我的CSS代码中使用height: 9mm
时,我的HTC Desire HD上的实际大小约为3毫米。
那么如何让浏览器使用绝对大小显示元素呢?
答案 0 :(得分:2)
你做不到。无论出于何种原因,移动设备上的浏览器都会统一告诉您宽度为1in
(“一英寸”)的元素宽度为96像素。实际的分辨率无关紧要;这就是他们所说的。
在不失去理智的情况下解决问题的唯一方法是对设备制造商(和设备软件供应商)充分调整“虚拟像素”负责。换句话说,你必须信任Apple,谷歌,三星,LG,HTC,摩托罗拉等,为公众提供的设备能让你的16px文本在用户正在查看的任何设备上都可读,无论涉及多少真实像素单个16px字形。
有时,你输了;新的iPad Mini就是一个很好的例子,因为它报告的屏幕尺寸与iPad 2相同,但屏幕尺寸要小得多。这意味着你的16px在iPad 2上的漂亮和清晰在iPad Mini上相当小。你的网页几乎不可能弄清楚它是在iPad Mini和iPad 2上的(按照设计!苹果公司就是这么做的故意),所以净效应是不幸的购买者一台iPad Mini已被制造商拒之门外。
相比之下,Nexus 7平板电脑的实际屏幕分辨率高于iPad Mini,但它会向您的网页报告较小的屏幕尺寸。这意味着 设备上的16px文本看起来很棒 - 该制造商为Nexus 7的所有者提供了良好的服务。
(您当然可以提供允许用户调整布局的工具。对于响应式网站,由于各种浏览器特性(错误),很难让网站运行良好,这是可以捏的/使用熟悉的移动设备手势进行缩放。)
答案 1 :(得分:1)
这在很大程度上取决于设备设置。在许多情况下 - 出于“兼容性原因” - 真正的互操作性已被交易以防止产品进入市场。
或换句话说:设备供应商为其客户修复网站,以便他们可以“按照他们所知的方式”浏览。
- 对角线cm(in): 11(4.3)
- 分辨率: 480×800
- ppcm(PPI): 85(217) *
- CSS像素比率: 1.5
* 基于给定显示尺寸的近似计算。
如果您看到该列表,您可以想象每个设备的不同之处。所以你不能相信设备本身。
如果您想解决此问题,您需要为您的用户提供一种配置方式,以便您可以采用。一些供应商/浏览器提供标题,告诉这些设备做真实的事情。这一切都取决于我手头上没有足够的资源来轻松和全球地解决这个问题。我将首先研究不同的模型及其浏览器软件,然后创建一个矩阵,如果有一些常见的程序可用,并且它们是否一起工作。
在此之前,我只会询问用户,使用实际设置,但会根据用户偏好对body元素进行采用设置。
答案 2 :(得分:1)
有两个基本因素使9mm
与9毫米的物理尺度不同。
首先,在显示设备中,anchor unit(如CSS值和单位模块级别3中所述)通常是像素,mm
单位被解释为等式1in
} = 25.4mm
= 96px
已满足。 (即使在印刷媒体中,mm
原则上应该固定在物理毫米上,但它会稍微偏离它。)你无能为力。
其次,在移动设备中,浏览器通常会自动缩放页面。原因是否则大多数页面表现得非常糟糕,因为它们是为更大的屏幕设计的(即使在每个方向上的像素数量方面)。这可以使用像
这样的标签来防止<meta name="viewport" content="width=device-width, initial-scale=1">
仅当页面设计为适应各种视口尺寸(包括小尺寸)时,才应使用此选项。
答案 3 :(得分:0)
如果这些真实世界的测量值始终可靠,那么当用于打印格式时,它们将永远如此。任何电子产品都会根据像素来思考,而不是那些像素在真实世界测量方面的转化。例如,当您将设备插入具有不同分辨率和DPI的投影仪或外接显示器时,cm和mm应该是什么意思?
哪个设备可以跟踪mm和cm转换的内容?显示设备或发送显示数据的设备?这太乱了。 RL测量仅供打印使用,即便如此,根据我的经验,它们可能有点冒险。至少我几年前的经历是冒险的。
答案 4 :(得分:0)
我想办法:大多数浏览器在用户代理标头中沿HTTP请求发送设备类型。基于该信息,我可以在服务器上找到真正的DPI并将其发送回响应中(例如,作为修改后的CSS)。
但是,保留和维护设备数据库以获得精确的DPI成本很高。我最终使用了一组常用参数的近似DPI。在这种情况下,1毫米不是恒定的,但差异应该最小化(通常)。