HTML元素的物理大小

时间:2010-03-11 11:44:22

标签: html browser rendering

我刚认真地进入了网络开发,我正试图在所有浏览器和平台上制作一个看起来相同物理尺寸(以英寸为单位)的页面 我相信百分比值和英寸值的组合可以形成一致的UI。

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

这是最简单的HTML代码,除了FireFox(在Chrome 3,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”时,它意味着现实世界中的一个实际英寸......

我该如何处理?

提前致谢, 的Vivek

编辑:

2006年,我开发了一个activex控件,为网站进行了实时视频编辑,2008年我们开始看到大量的Vista使用和更高的DPI屏幕,这使得UI无法使用,我重新设计应用程序,以便根据DPI缩小所有内容,从那时起,每个人都很高兴他们不需要眼镜来使用这个功能......

Win7和Vista具有这种“DPI缩放”模式的全部原因是允许非DPI识别应用程序显示(但由于它基本上会扩展应用程序的画布,因此应用程序看起来很模糊)。

我无法相信调用GetDeviceCaps()或X-Windows等效文件比硬编码96 DPI更难。无论如何,它不会影响以像素为单位测量的任何页面....

4 个答案:

答案 0 :(得分:4)

无法完成。周期。

屏幕是像素网格,是物理显示器识别的唯一单元。必须将任何其他测量值转换为像素才能显示。

此转换由操作系统的图形子系统完成,该子系统具有内部“DPI”设置 - 引用,因为它是任意的,并不一定对应于任何真实设备的实际物理DPI。例如,Windows默认为96 DPI,无论它连接到哪个显示器。

查看高度为“1in”的页面时,你的机器会查看它,计算出来,因为它设置为144 DPI,“1in”表示144像素并且使它高144像素,无论这144像素在显示器上占据的物理距离如何。

当具有默认96 DPI设置的典型Windows用户查看它时,他们的计算机计算“1in”= 96px并使其高96像素,无论与96像素相对应的物理距离如何。

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

打印页面的暴政,无论我们喜欢与否,都迫使事物成为一定的规模。拥抱这种力量可以让您的用户体验他们的体验。不要试图把它拿走 - 你不会成功,你只会在这个过程中惹恼别人。

答案 1 :(得分:1)

不是以px给出大小,而是以百分比形式给出它。这样它就可以根据百分比放在任何屏幕上。

答案 2 :(得分:0)

说实话,我真的不认为你能做到。

屏幕的DPI由硬件决定,即15.4英寸屏幕,分辨率为1920x1080 = 144DPI。

为什么您需要网站显示为相同的物理尺寸?当然大小相同,与屏幕成正比就足够了?即如果我的分辨率是1920x1080,那么你的网站应该占到广泛的50%。如果我使用1600x1050,它应该占60%?

答案 3 :(得分:0)

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

使用真实世界单位取决于让客户知道系统的正确DPI。在没有打扰的客户端和未正确配置的系统之间,这是一种无望的情况。

如果您希望缩放某些内容以使其对用户系统来说是合理的大小,那么最好使用em单位根据用户的字体大小进行缩放。这仍有问题,默认值不合适,用户没有更改,但它比物理单位更常见。