My html page is facing a problem when printing from different Android devices. The page height changes dynamically based on label updates through JavaScript, and I pass this height to adjust the printed page (approximately 856x3000 pixels). However, issues arise when printing from devices with varying pixel ratios - for instance, larger screens may have a ratio of 200%-300% while older smaller devices could be around 150%. This results in the HTML page having inconsistent heights across devices, causing printing discrepancies. The challenge lies in maintaining a consistent height regardless of the screen's aspect ratio. Any suggestions on how to address this issue are appreciated.
@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;
}