如何在JavaScript中将像素转换为印刷英寸？
我想调整SPAN元素样式的字体的大小，直到在纸上打印出来时SPAN的文本宽度为7.5英寸，但是JavaScript仅报告SPAN的clientWidth属性(以像素为单位)。
<span id="test">123456</span>
接着：
#test {
font-size:1.2in; /* adjust this for yourself until printout measures 7.5in wide */
}
接着：
console.log(document.getElementById('test').clientWidth);
我已经在一台机器上实验确定它使用大约90 DPI作为转换因子，因为上述代码至少在Firefox 3下记录了大约675.
在不同的浏览器，打印机，屏幕等配置下，此数字不一定相同。
那么，如何找到浏览器正在使用的DPI？我该怎么调用才能在系统上恢复" 90"？
解决方案
I've determined experimentally on one machine that it uses approximately 90 DPI as a conversion factor, because the above code logs approximately 675, at least under Firefox 3. 1) Is this the same on every machine/browser?
当然不。每个屏幕分辨率/打印机/打印设置组合都会有所不同。除非我们使用em而不是像素，否则确实有办法知道打印尺寸。
该网不是用于印刷材料的良好介质。
- 不
- 你不
实际上，屏幕分辨率设置也会使情况更加复杂。
祝你好运。
如果生成的内容是要以特定方式显示的，则可能需要查看要打印的格式，例如PDF。 HTML / CSS旨在适应屏幕尺寸，分辨率，色深等的不同配置。这并不是说盒子的宽度应恰好为7.5英寸。
正如其他答案所表明的那样，从网络打印是一件棘手的事情。这是不可预测的，可悲的是，并非所有浏览器和配置都反应相同。
但是，我会指出方向：
我们可以将CSS添加到专门用于打印的文档上，如下所示
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
这样，我们可以将页面的打印输出格式化为单独的样式表，并保留常规样式表以在屏幕上显示。我之前已经完成了此操作，并获得了不错的结果-尽管需要进行大量调整才能确保打印出的文档以我们想要的方式出现。
关于从网络打印的主题的一篇有趣的文章：
要打印的清单
来自W3C的一些有关CSS打印配置文件的信息：
W3C CSS打印配置文件
你有没有尝试过
@media print { #test { width: 7in; }}
我认为这可以满足需求。但是我同意其他海报，HTML并不真正适合这种情况。无论如何，希望我们觉得这很有用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {width: 7in; border: solid 1px red;}
#span {display: table-cell; width: 1px; border: solid 1px blue; font-size: 12px;}
</style>
<script language="javascript" type="text/javascript">
function resizeText() {
var container = document.getElementById("container");
var span = document.getElementById("span");
var containerWidth = container.clientWidth;
var spanWidth = span.clientWidth;
var nAttempts = 900;
var i=1;
var font_size = 12;
while ( spanWidth < containerWidth && i < nAttempts ) {
span.style.fontSize = font_size+"px";
spanWidth = span.clientWidth;
font_size++;
i++;
}
}
</script>
</head>
<body>
<div id="container">
<span id="span">test</span>
</div>
<a href="javascript:resizeText();">resize text</a>
</body>
</html>
总结一下：
这不是可以使用HTML解决的问题。除了CSS2打印属性外，浏览器没有定义或者预期的方式来打印内容。
首先，一个像素(在CSS中)不必与一个像素(在屏幕上)相同，因此某个值对我们有效的事实并不意味着它将转化为其他设置。
其次，用户可以使用页面缩放等功能更改文本大小。
第三，由于没有用于打印目的的网页布局方法，每个浏览器的做法都不相同。只需在firefox vs IE中打印预览内容，然后查看区别即可。
第四，打印带来了许多其他变量，例如打印机的DPI，纸张尺寸。此外，大多数打印机驱动程序支持用户缩放打印对话框中的输出集，而浏览器从未看到过。
最后，最有可能是因为打印不是HTML的目标，所以Web浏览器的"打印引擎"(无论如何，在我已经看到的所有浏览器中)都与它的其余部分断开了连接。JavaScript无法与打印引擎"对话"，反之亦然，因此"浏览器用于打印预览的DPI编号"不会以任何方式公开。
我建议使用PDF文件。
这是我从Orion Edwards(尤其是webkit.org的链接)和Bill的帖子中学到的答案的合并答案。
似乎答案实际上总是96 DPI，尽管我们可以自由运行以下(公认的草率)代码，并且我想听听我们是否有不同的答案：
var bob = document.body.appendChild(document.createElement('div'));
bob.innerHTML = "<div id='jake' style='width:1in'>j</div>";
alert(document.getElementById('jake').clientWidth);
如webkit.org文章所述，此数字是相当标准的，不受打印机或者平台的影响，因为这些打印机或者平台使用了不同的DPI。
即使不是，使用上面的代码，我们也可以找到所需的答案。然后，我们可以在JavaScript中使用DPI，像Bill一样限制clientWidth，再结合使用英寸的CSS，只要用户不执行Orion Edwards提到的任何时髦缩放即可正确打印出某些内容，或者至少在那之后，这取决于用户，他们可能想做一些超出程序员想法的事情，例如在11x17纸上打印出程序员设计用于8.5x11的内容，但是仍然可以。即使用户想要什么，也可以"正确地工作"。
