display.js (1.9 KB)

 1 // Estimate physical display density so we can attempt to render the page at print size
 2 
 3 // Detect Safari browser
 4 function isSafari() {
 5 	const ua = navigator.userAgent;
 6 	return ua.includes('Safari') && !ua.includes('Chrome') && !ua.includes('Chromium');
 7 }
 8 
 9 const isUsingSafari = isSafari();
10 
11 const isUsingWindows = navigator.userAgent.includes('Windows');
12 
13 const PANEL_PPI = {
14 	1920: 141,   // 15.6" 1080p laptop
15 	2560: 109,   // 27" 1440p
16 	2736: 267,   // 12.3" 3:2 tablet
17 	2880: 267,   // 13" 3:2 tablet
18 	3840: 163    // 27" 4K
19 };
20 
21 function estimateWindowsPPI() {
22 	const pixelRatio = window.devicePixelRatio;
23 	if (pixelRatio === 1) return null;
24 
25 	const nativeWidth = screen.width * pixelRatio;
26 	if (nativeWidth >= 3800 && pixelRatio >= 2) return null;
27 
28 	const panel = Object.keys(PANEL_PPI).find(width => Math.abs(width - nativeWidth) <= width * 0.02);
29 
30 	return panel ? PANEL_PPI[panel] / pixelRatio : null;
31 }
32 
33 function estimateScreenPPI() {
34 	const logicalWidth = screen.width;
35 	const pixelRatio = window.devicePixelRatio;
36 
37 	if (isUsingWindows) {
38 		const windowsPPI = estimateWindowsPPI();
39 		if (windowsPPI) return windowsPPI;
40 	}
41 
42 	if (logicalWidth >= 3840) return 163;    // 27" 4K, OS scaling off
43 	if (logicalWidth >= 2048) return 109;    // 27" 5K retina or 1440p
44 	if (logicalWidth >= 1800) return 92.6;   // 23.8" 1080p and friends
45 
46 	return pixelRatio > 1 ? 127.7 : 92.6;    // retina laptop (2560px / 227ppi), else standard density
47 }
48 
49 // Life-size page width; CSS clamps this to the viewport so it never overflows horizontally
50 function applyPageWidth() {
51 	const pageWidth = (LETTER_WIDTH_MM / 25.4) * estimateScreenPPI();
52 	document.documentElement.style.setProperty('--page-width', `${pageWidth}px`);
53 	updateGridLineWidth();
54 }
55 
56 const baselinePixelRatio = window.devicePixelRatio;
57 
58 function updateGridLineWidth() {
59 	const zoom = window.devicePixelRatio / baselinePixelRatio;
60 	document.documentElement.style.setProperty('--line-width', `${Math.min(1, 1 / zoom)}px`);
61 }
62 
63 applyPageWidth();