<!DOCTYPE html>
<html>
<head>
<title>A4 页面大小设置</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@page {
size: A4;
margin: 0;
}
body {
width: calc(210mm * (96 / 25.4));
height: calc(297mm * (96 / 25.4));
margin: 0;
}
</style>
</head>
<body style="border: 1px red solid;background-color: #f8f9fa">
<h1>这是一个 A4 大小的网页</h1>
<p>这是一段示例文本。</p>
</body>
<script>
function getDPI() {
var tempDiv = document.createElement("div");
tempDiv.style.width = "1in";
tempDiv.style.visibility = "hidden";
document.body.appendChild(tempDiv);
var dpi = tempDiv.offsetWidth;
document.body.removeChild(tempDiv);
return dpi;
}
function mmToPixel(mm, dpi) {
// 1 inch = 25.4 mm
var inches = mm / 25.4;
var pixels = inches * dpi;
return Math.round(pixels);
}
function a4SizeInPixels() {
var dpi = getDPI();
var width_mm = 210; // A4纸宽度，单位：毫米
var height_mm = 297; // A4纸高度，单位：毫米
var width_px = mmToPixel(width_mm, dpi);
var height_px = mmToPixel(height_mm, dpi);
return { width: width_px, height: height_px };
}
// 直接调用工具函数获取 A4 纸的像素尺寸
var a4_size = a4SizeInPixels();
console.log("A4纸的像素尺寸：宽 " + a4_size.width + "px, 高 " + a4_size.height + "px");
</script>
</html>