Come posso ridimensionare un'intera pagina Web con CSS?

Utilizzando Firefox, è possibile ingrandire un'intera pagina Web semplicemente premendo CTRL +. Ciò che fa è ingrandire proporzionalmente l'intera pagina Web (caratteri, immagini, ecc.).

Come posso replicare la stessa funzionalità usando semplicemente CSS?

Esiste qualcosa del tipo page-size: 150%(che aumenterebbe le parti dell'intera pagina di x%?)

Potresti essere in grado di utilizzare la zoomproprietà CSS - supportata in IE 5.5+, Opera e Safari 4 e Chrome

Posso usare: css Zoom

Firefox è l'unico browser principale che non supporta Zoom ( elemento bugzilla qui ) ma è possibile utilizzare la proprietà "proprietaria" -moz-transform in Firefox 3.5 .

Quindi puoi usare:

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
} 

Questa è una risposta piuttosto tardiva, ma puoi usarla

body {
   transform: scale(1.1);
   transform-origin: 0 0;
   // add prefixed versions too.
}

per ingrandire la pagina del 110%. Sebbene lo zoomstile sia presente, Firefox non lo supporta ancora tristemente.

Inoltre, questo è leggermente diverso dallo zoom. Il css transformfunziona come uno zoom dell'immagine, ti allargare la vostra pagina, ma non è la causa di riflusso, etc.

Modifica ha aggiornato l'origine della trasformazione.

Se il tuo CSS è costruito completamente intorno exo emunità, questo potrebbe essere possibile e fattibile. Dovresti solo dichiarare font-size: 150%nel tuo stile per bodyo html. Ciò dovrebbe causare un ridimensionamento proporzionale di ogni altra lunghezza. Tuttavia, non puoi ridimensionare le immagini in questo modo, a meno che non abbiano anche uno stile.

Ma questo è un grande se sulla maggior parte dei siti, in ogni caso.

Come dice Johannes - non abbastanza rappresentante per commentare direttamente la sua risposta - puoi davvero farlo fintanto che tutte le dimensioni degli elementi sono specificate come un multiplo della dimensione del carattere. Significato, tutto ciò in cui hai usato%, em o ex unità". Anche se penso che% sia basato sul contenere l'elemento, non sulla dimensione del carattere.

E normalmente non useresti queste unità relative per le immagini, dato che sono composte da pixel, ma c'è un trucco che lo rende molto più pratico.

Se lo definisci, body{font-size: 62.5%};1em sarà equivalente a 10px. Per quanto ne so, questo funziona su tutti i principali browser.

Quindi puoi specificare le tue immagini quadrate (ad esempio) 100px con width: 10em; height: 10em;e supponendo che il ridimensionamento di Firefox sia impostato sul valore predefinito, le immagini avranno la loro dimensione naturale.

La marca body{font-size: 125%};e tutto, comprese le immagini, avranno una dimensione originale doppia.

Con questo codice 1em o 100% sarà uguale all'1% dell'altezza del corpo

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"

 * {
transform: scale(1.1, 1.1)
}

questo trasformerà ogni elemento nella pagina

Jon Tan ha fatto questo con il suo sito - http://jontangerine.com/ Tutto ciò che include le immagini è stato dichiarato in ems. Qualunque cosa. Ecco come si ottiene l'effetto desiderato. Lo zoom del testo e lo zoom dello schermo producono quasi lo stesso risultato.

I CSS non saranno in grado di eseguire lo zoom su richiesta, ma se si accoppiano i CSS con JS, è possibile modificare alcuni valori per ingrandire una pagina. Tuttavia, come è stato detto, questa funzionalità è standard al giorno d'oggi nei browser moderni: non è necessario replicarla. È un dato di fatto, replicarlo rallenterà il tuo sito Web (più cose da caricare, più JS o CSS da analizzare o eseguire e applicare, ecc.)

Ho il seguente codice che ridimensiona l'intera pagina attraverso le proprietà CSS. L'importante è impostare body.style.width sull'inverso dello zoom per evitare lo scorrimento orizzontale. È inoltre necessario impostare transform-origin in alto a sinistra per mantenere la parte in alto a sinistra del documento nella parte in alto a sinistra della finestra.

        var zoom = 1;
        var width = 100;

        function bigger() {
            zoom = zoom + 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
        function smaller() {
            zoom = zoom - 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }