2024-10-31 15:07:34 +08:00
|
|
|
|
<!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>
|
2024-10-31 19:01:59 +08:00
|
|
|
|
<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>
|
2024-10-31 15:07:34 +08:00
|
|
|
|
</html>
|
