Zoom Browser perecentage

by murgiaMarco

HTML

<div class="container">
    <span>da testare fuori da jsfiddel in fullpage</span>
    <h1>Zoom Browser</h1>
    <div class="zoom-value" id="zoomDisplay">Caricamento...</div>
    <button onclick="alert(`Zoom attuale: ${getZoomPercent()}% (${getZoomFactor()}x)`)">
        Mostra Zoom
    </button>
</div>

CSS

body {
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        background: #f4f4f4;
    }
    .container {
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        text-align: center;
        width: 300px;
    }
    h1 {
        margin-bottom: 10px;
    }
    .zoom-value {
        font-size: 1.5em;
        color: #0078d7;
        margin: 10px 0;
    }
    button {
        padding: 10px 15px;
        font-size: 1em;
        background: #0078d7;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    button:hover {
        background: #005fa3;
    }

JavaScript

// Funzione per ottenere il fattore di zoom (cross-browser)
    function getZoomFactor() {
        // Metodo principale: rapporto outerWidth / innerWidth
        let zoom = window.outerWidth / window.innerWidth;

        // Fallback per Firefox (dove outerWidth non è affidabile)
        if (navigator.userAgent.toLowerCase().includes('firefox')) {
            zoom = window.devicePixelRatio;
        }

        return zoom.toFixed(2);
    }

    // Funzione per ottenere la percentuale di zoom
    function getZoomPercent() {
        return Math.round(getZoomFactor() * 100);
    }

    // Aggiorna il display
    function updateZoomDisplay() {
        document.getElementById('zoomDisplay').textContent =
            `${getZoomPercent()}% (${getZoomFactor()}x)`;
    }

    updateZoomDisplay();
    window.addEventListener('resize', updateZoomDisplay);