Created
June 18, 2025 17:29
-
-
Save sanusart/6ad3bf3ab87ebe289d1317f212bf3cf7 to your computer and use it in GitHub Desktop.
Detects browser zoom level using JavaScript. #zoom #detection #browser
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Zoom Detection</title> | |
| <style> | |
| .zoom-box { | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| margin: 24px auto 0 auto; | |
| padding: 16px 28px; | |
| border-radius: 12px; | |
| background: linear-gradient(90deg, #e0eafc 0%, #cfdef3 100%); | |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); | |
| display: block; | |
| min-width: 220px; | |
| max-width: 480px; | |
| text-align: center; | |
| transition: background 0.3s, color 0.3s; | |
| margin-bottom: 0; | |
| font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif; | |
| } | |
| .zoom-box.red { | |
| background: linear-gradient(90deg, #f857a6 0%, #ff5858 100%); | |
| color: #fff; | |
| } | |
| .zoom-box.green { | |
| background: linear-gradient(90deg, #43e97b 0%, #38f9d7 100%); | |
| color: #222; | |
| } | |
| #zoom-details { | |
| margin: 16px auto 0 auto; | |
| font-size: 1rem; | |
| color: #333; | |
| font-family: 'Segoe UI Mono', 'Fira Mono', 'Consolas', monospace; | |
| background: #f8f8fa; | |
| border-radius: 8px; | |
| padding: 12px 18px; | |
| display: block; | |
| max-width: 520px; | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); | |
| line-height: 1.6; | |
| letter-spacing: 0.01em; | |
| } | |
| .zoom-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-top: 8px; | |
| font-size: 0.98rem; | |
| } | |
| .zoom-table th, | |
| .zoom-table td { | |
| padding: 6px 8px; | |
| border-bottom: 1px solid #e0e0e0; | |
| text-align: left; | |
| } | |
| .zoom-table th { | |
| background: #e0eafc; | |
| color: #2a3b4c; | |
| font-weight: 600; | |
| } | |
| .zoom-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .zoom-badge { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| border-radius: 8px; | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| background: #e0eafc; | |
| color: #2a3b4c; | |
| margin-left: 8px; | |
| font-family: 'Segoe UI', 'Roboto', 'Arial', sans-serif; | |
| } | |
| .zoom-badge.firefox { | |
| background: #ff9800; | |
| color: #fff; | |
| } | |
| .zoom-badge.chrome { | |
| background: #2196f3; | |
| color: #fff; | |
| } | |
| .zoom-badge.edge { | |
| background: #0078d7; | |
| color: #fff; | |
| } | |
| .zoom-badge.safari { | |
| background: #43e97b; | |
| color: #222; | |
| } | |
| .zoom-badge.opera { | |
| background: #ff1b6b; | |
| color: #fff; | |
| } | |
| .zoom-badge.other { | |
| background: #bdbdbd; | |
| color: #222; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1 style="text-align:center;margin-top:32px;font-size:2.2rem;color:#2a3b4c;letter-spacing:1px;">Zoom Detection Demo | |
| </h1> | |
| <div id="zoom-result" class="zoom-box">Detecting zoom...</div> | |
| <div id="zoom-details"></div> | |
| <script> | |
| function getZoomInfo() { | |
| const innerW = window.innerWidth; | |
| const outerW = window.outerWidth; | |
| const innerH = window.innerHeight; | |
| const outerH = window.outerHeight; | |
| const screenW = window.screen.width; | |
| const screenH = window.screen.height; | |
| const userAgent = navigator.userAgent.toLowerCase(); | |
| const isFirefox = userAgent.includes('firefox'); | |
| const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent); | |
| const isEdge = userAgent.includes('edg/'); | |
| const isOpera = userAgent.includes('opr/') || userAgent.includes('opera/'); | |
| const isChrome = (userAgent.includes('chrome') && !isSafari && !isFirefox && !isEdge && !isOpera); | |
| let browser = 'Other', badge = 'other'; | |
| if (isFirefox) { browser = 'Firefox'; badge = 'firefox'; } | |
| else if (isSafari) { browser = 'Safari'; badge = 'safari'; } | |
| else if (isEdge) { browser = 'Edge'; badge = 'edge'; } | |
| else if (isOpera) { browser = 'Opera'; badge = 'opera'; } | |
| else if (isChrome) { browser = 'Chrome'; badge = 'chrome'; } | |
| let zoomRatio; | |
| if (isFirefox) { | |
| const defaultDPR = window.screen.pixelDepth > 24 ? 2 : 1; | |
| zoomRatio = window.devicePixelRatio / defaultDPR; | |
| } else if (isChrome || isEdge) { | |
| let baseDPR = 1; | |
| if (window.screen.availWidth * 1.8 >= window.screen.width) { | |
| baseDPR = 2; | |
| } | |
| zoomRatio = window.devicePixelRatio / baseDPR; | |
| } else if (isSafari) { | |
| zoomRatio = outerW / innerW; | |
| } else { | |
| zoomRatio = outerW / innerW; | |
| } | |
| const zoomPercent = Math.round(zoomRatio * 100); | |
| const tolerancePercent = 3; | |
| const isZoomed = Math.abs(zoomPercent - 100) > tolerancePercent; | |
| return { | |
| browser, | |
| badge, | |
| zoomRatio, | |
| zoomPercent, | |
| isZoomed, | |
| innerW, | |
| outerW, | |
| innerH, | |
| outerH, | |
| screenW, | |
| screenH, | |
| userAgent: navigator.userAgent | |
| }; | |
| } | |
| function renderZoomInfo() { | |
| const info = getZoomInfo(); | |
| const result = document.getElementById('zoom-result'); | |
| const details = document.getElementById('zoom-details'); | |
| if (info.isZoomed) { | |
| result.textContent = `Zoom detected: approx ${info.zoomPercent}%`; | |
| result.classList.remove('green'); | |
| result.classList.add('red'); | |
| } else { | |
| result.textContent = 'No zoom detected'; | |
| result.classList.remove('red'); | |
| result.classList.add('green'); | |
| } | |
| details.innerHTML = ` | |
| <div style="margin-bottom:12px;"> | |
| <span style="font-size:1.2rem;font-weight:600;">Browser:</span> | |
| <span class="zoom-badge ${info.badge}">${info.browser}</span> | |
| </div> | |
| <table class="zoom-table"> | |
| <tr><th>Zoom Ratio</th><td>${info.zoomRatio.toFixed(2)}</td></tr> | |
| <tr><th>Zoom %</th><td>${info.zoomPercent}%</td></tr> | |
| <tr><th>Window.innerWidth</th><td>${info.innerW}</td></tr> | |
| <tr><th>Window.outerWidth</th><td>${info.outerW}</td></tr> | |
| <tr><th>Window.innerHeight</th><td>${info.innerH}</td></tr> | |
| <tr><th>Window.outerHeight</th><td>${info.outerH}</td></tr> | |
| <tr><th>Screen.width</th><td>${info.screenW}</td></tr> | |
| <tr><th>Screen.height</th><td>${info.screenH}</td></tr> | |
| <tr><th>User Agent</th><td style="word-break:break-all;font-size:0.98rem;">${info.userAgent}</td></tr> | |
| </table> | |
| `; | |
| } | |
| window.addEventListener('resize', renderZoomInfo); | |
| window.addEventListener('DOMContentLoaded', renderZoomInfo); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment