57 lines
1.6 KiB
HTML
57 lines
1.6 KiB
HTML
<!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>
|