È possibile attivare la funzione di ingrandimento e riduzione del browser tramite JavaScript?Attivazione del browser Funzioni di zoom in e zoom out
Desidero aggiungere pulsanti Zoom-in (+) e Zoom-Out (-) nel mio sito Web e facendo clic sul pulsante per richiamare l'ingrandimento del browser (che può essere richiamato premendo ctrl e +)/zoom-out (ctrl e -) funzione.
Non credo che ci sia un modo standard per farlo. Alcuni browser potrebbero offrire la propria API per farlo, ma sono dubbioso.
Detto questo ho compiuto questo effetto in passato attraverso alcuni trucchi CSS. Essenzialmente nel tuo CSS definisci ogni misura (larghezza, altezza, margine, padding, dimensione del font, ecc.) In em anziché in px. Ciò rende essenzialmente la dimensione di tutto dipendente dalla dimensione del carattere predefinito del documento. Quindi per ingrandire, modifica la dimensione del carattere del tag del corpo per rendere le cose più piccole o più grandi. Se lo fai con attenzione l'effetto apparirà come se l'utente ingrandisse usando il loro browser.
Per semplificare la vita quando si esegue questa operazione mi piace utilizzare un foglio di stile di ripristino CSS che imposta 1em per essere 10px. In questo modo, se vuoi che un div sia largo 200px, basta impostarlo su 20em. Puoi farlo impostando la dimensione del carattere del corpo al 62,5% nel tuo foglio di stile di ripristino CSS. Poiché la maggior parte dei browser ha una dimensione predefinita di 16px e pertanto 1em = 16px, 10px è 62,5%.
Spero che questo aiuta, è un sacco di lavoro da fare nel modo giusto, ma utilizzando em invece di px mi ha aiutato in innumerevoli modi quando si lavora con HTML e CSS.
Per la cronaca, nei browser moderni, questo può essere ancora più semplice implementare usando rem (root em) invece di em. Vedi http://snook.ca/archives/html_and_css/font-size-with-rem –
Non credo che tu possa. Su IE è possibile simularlo con la proprietà CSS zoom, ma non è standard e quindi il supporto esterno a IE varierà.
che questo sia stato già risposto con
window.parent.document.body.style.zoom = 1.5;
+1 per la risposta facile e veloce. Tieni presente che questo stato non verrà salvato come se si eseguisse lo zoom con il browser, comunque. Lo sviluppatore dovrebbe quindi salvare lo stato di zoom in una variabile di sessione e riprodurlo body.onLoad(), ad esempio. –
ho rimosso il JavaScript-events' tag 'come questa domanda non ha un aspetto dell'evento. –
possibile duplicato del [Modifica del livello di browser zoom] (http://stackoverflow.com/questions/1055336/changing-the-browser-zoom-level) – derobert
sono stato in grado di scrivere qualcosa che funziona per IE, Chrome e FF: http://stackoverflow.com/questions/4386760/calling-keyevent-from-mouse/4386873#4386873 –