代码之家 › 专栏 › 技术社区 › GavinR Jon Kirkman

HTML元素物理大小

rendering browser html

GavinR Jon Kirkman · 技术社区 · 6 年前

我刚刚认真地研究了web开发,我正试图在所有浏览器和平台上创建一个物理大小(英寸)相同的页面我相信百分比值和英寸值的组合可以构成一个一致的ui。

我自己的系统是一个15.4英寸屏幕,1920x1200像素,即144 dpi。

以下是最简单的html代码,除了firefox(在chrome 3、chrome 4、opera 10.5、ie7上试用)之外,其他浏览器都无法显示正确的大小。

<html><head>
<body>
<div 
style="position:absolute; width:2in; height:1in;   border:1px solid" > 
hello world</div>
</body></html>

Chrome、Opera和IE渲染一个0.67英寸的框(它们似乎假设屏幕为96 dpi)

我正在运行windows xp,但我看不出这会有什么不同。在我测试过的其他机器上也有类似的错误渲染。

我想当我在HTML中说“1in”时,它意味着在现实世界中只有一英寸。

我该怎么处理?

提前谢谢你, 维韦克

编辑:

2006年,我开发了一个activex控件,它为一个网站进行实时视频编辑,2008年,我们开始看到大量vista的使用和更高的dpi屏幕,这使得ui不可用,我重新设计了这个应用程序,以便所有的东西都能根据dpi进行缩放,从那时起,每个人都很高兴他们不需要gl。用这个功能…

win7和vista采用这种“dpi缩放”模式的全部原因是允许非dpi感知的应用程序显示(但由于它基本上会放大应用程序的画布,因此应用程序看起来很模糊)。

我不敢相信调用getDeviceCaps()或X-Windows等效程序比硬编码96dpi更难。不管怎样,它不会影响任何像素大小的页面…

4 回复 | 直到 15 年前

Dave Sherohman 15 年前

做不到。时期。

屏幕是像素网格,这就是只有由物理显示器识别的单元。任何其他测量值都必须转换为像素以供显示。

这个转换是由操作系统的图形子系统完成的,它有一个内部的“dpi”设置,因为它是任意的,不一定对应于任何真实设备的实际物理dpi。例如,windows默认为96 dpi,而不考虑它连接到的显示器。

什么时候? 你查看一个高度为“1in”的页面,您的机器会查看该页面,计算出,由于它设置为144 dpi,“1in”表示144像素,并使其高144像素,而不管这些144像素将在您的显示器上占据的物理距离是多少。

当具有默认96 dpi设置的典型windows用户查看它时,他们的计算机会计算“1in”=96px并使其高96像素,同样,不管与这些96像素对应的物理距离如何。

你知道吗? 这是件好事。 这意味着视力差的用户可以降低他们的视频驱动程序的dpi设置,所有以英寸、厘米、点、em或其他“真实世界”单位(即基本上除百分比或像素以外的任何单位)大小的东西都会变大,以便他们更容易地看到它。相反,我们中那些不介意小文本的人可以人为地增加dpi设置,以缩小所有设置并在屏幕上显示更多内容。

印刷版的暴政,不管我们喜不喜欢,都会迫使东西达到一定的尺寸,已经不复存在了。拥抱这给你的用户带来的超越他们体验的力量。不要试图夺走它-你不会成功的,你只会在这个过程中惹恼别人。

karthi_ms 15 年前

不是用px表示大小,而是用百分比表示。以便它可以根据百分比显示在任何屏幕上。

jamie 15 年前

老实说,我真的不认为你能。

屏幕的dpi由硬件确定,即分辨率为1920x1080=144dpi的15.4“屏幕。

为什么你需要网站显示为相同的物理尺寸?同样的尺寸,和屏幕成比例就足够了吗?也就是说,如果我的分辨率是1920x1080,你的网站应该占到50%的宽度。如果我用的是1600x1050,应该占60%?

Quentin 15 年前

简而言之——你不能,至少在屏幕上使用。

使用真实世界的单元取决于让客户知道系统的正确dpi。在不麻烦的客户机和配置不正确的系统之间,这是一种无望的情况。

如果您希望对某个对象进行缩放,使其成为用户系统的合理大小,那么您最好使用 em 根据用户字体大小缩放的单位。这仍然存在一些问题,默认值不合适,用户没有更改它们,但它比物理单元更经常是正确的。