我有一个html页面，我通过不同的android设备打印。页面的高度根据我通过Javascript更新的一些标签动态变化。然后我将页面的高度传递给android，这样我就可以设置要打印的页面的高度。(尺寸为856x3000ish像素)。我的问题是，当我试图从大屏幕移动设备打印文档时，设备像素比率是200%-300%，但当我试图从较旧的较小设备打印相同的文档时，该比率是150%，因此在每个设备(以及在不同的浏览器或具有不同缩放的相同浏览器上)，html页面得到不同的高度。这导致打印机的行为因高度的不同而不同。例如，如果我用100%宽高比的设备打印，我的打印是完美的，但如果我用200%宽高比的设备打印，那么我的文档就不能正确打印，文档末尾的一些厘米根本就没有打印出来。我非常确信，问题是不同设备的不同宽高比导致html页面的高度发生变化。无论屏幕的长宽比如何，我如何保持html页面的相同高度?欢迎提出其他建议。
@page {
margin: 5px 5px 5px 5px;
}
@font-face {
font-family: 'customFont';
src: url("../fonts/Roboto-Regular.ttf");
}
html {
transform-origin: center;
font-family: 'customFont';
line-height: 1.2em;
}
#mainBody {
height: 100%;
padding:0px !important;
margin:0px;
}
form {
font-size: 20px;
width: 840px;
padding-left: 5px;
padding-right: 5px;
border: 2px solid;
}
label {
border: hidden;
font-size: 18.5px;
vertical-align: middle;
}
在html文件的<head>中引入下一行:
<meta name="viewport" content="width=device-width, initial-scale=1">
接下来你可以在css中添加"height": 100vh的值。
VH代表"视口高度"。所以你总是保持100%的高度，无论什么设备。
在我的示例中，内容将保持动态。但是如果你只想要一个固定的大小，无论你使用什么设备，你都必须使用px.
希望这对你有用。