rileva la dimensione del carattere del browser

Question

È possibile rilevare la dimensione del carattere del browser? Inoltre è possibile dedurre la nuova dimensione del carattere quando l'utente cambia la dimensione del carattere dalla selezione del menu? Grazie mille per l'aiuto di tutti. Cordiali saluti.

Answer 1

La risposta breve è no. Tuttavia, sospetto che desideri inserire dimensioni diverse su elementi diversi a seconda della dimensione del carattere dell'utente. Se è così, puoi dare un'occhiata a specificare le regole CSS in "em", che è definito come relativo alla dimensione del carattere corrente.

Answer 2

Beh, è ​​possibile, ma il mio corvo seduto su una sfera di cristallo mi dice di non dirti come, ma di chiederti cosa vuoi ottenere. Molto probabilmente, vuoi che una pagina Web abbia un bell'aspetto, non importa quale sia la dimensione del font. Per questo, raccomando lo CSS units em, ex etc.

Answer 3

È possibile rilevare la dimensione del carattere del browser?

Tipo di, ma raramente è una buona idea. Assumendo < body> non ha alcuna dimensione del carattere impostare e non ci sono regole interferenti (come ‘div corpo’):

var measure= document.createElement('div'); 
measure.style.height= '10em'; 
document.body.appendChild(measure); 
var size= measure.offsetHeight/10; 
document.body.removeChild(measure); 

ti dà la dimensione in pixel di 1em.

Inoltre è possibile dedurre la nuova dimensione del carattere quando l'utente cambia la dimensione del carattere dalla selezione del menu?

Non direttamente, ma è possibile eseguire il polling di una funzione di misurazione come quella sopra ogni volta. Su IE puoi appendere il segno di spunta a un'espressione CSS(), poiché questi ricalcolano quando la dimensione del carattere viene modificata (tra molte altre volte), ma probabilmente non ne vale la pena (avresti ancora bisogno del polling per altri browser ed espressioni () è deprecato comunque).

Answer 4

Per quanto ne so non c'è un modo per scoprirlo. Si presume che la dimensione predefinita sia 16 pixel, che è lo standard.

La procedura ottimale consiste nell'impostare tutte le dimensioni dei caratteri in em che si adattano alle dimensioni del carattere di base.

La maggior parte delle persone imposta il carattere di base su 10 pixel che facilitano il lavoro con gli em.

Esempio

16px = 1em

p { 
    font-size:2em; 
} 

Questo sarebbe uguale 32px

---

10px = 0.625em

body { 
    font-size:0.625em; 
} 

p { 
    font-size:2em; 
} 

Questo equivarrebbe a 20px;

Spero che questo abbia aiutato.

Answer 5

La mia motivazione per il monitoraggio delle modifiche alle dimensioni del testo consiste nel modificare dinamicamente l'altezza (o la larghezza) degli elementi in modo che l'intera pagina non richieda barre di scorrimento della finestra del browser. In genere quando si esegue questa operazione si risponde all'evento di ridimensionamento, ma le modifiche alla dimensione del carattere possono influire anche sui calcoli.Non mi interessa tanto quanto sia la dimensione del carattere reale, ho solo bisogno di sapere quando cambia.

Ecco alcuni codici jQuery che utilizzo. Questo è simile alla soluzione suggerita da Bobince. Ho una funzione di ridimensionamento che aggiornerà l'altezza di un div ecc

$(window).resize(resize); // update when user resizes the window. 

$("body").append("<p id='textSizeReference' style='display:none;padding:0'>T</p>"); 
var refTextHeight = $("#textSizeReference").height(); 
setInterval(function() { 
    var h = $("#textSizeReference").height(); 
    if (h != refTextHeight) { 
     refTextHeight = h; 
     resize(); // update when user changes text size 
    } 
}, 500); 

Se questo è un app ajax che i sondaggi per le modifiche in location.hash è possibile utilizzare la stessa funzione polling per il cambio dimensione del testo.

Answer 6

Ecco qualcosa che ho trovato che funziona bene per la rilevazione di famiglia di caratteri attuali del documento in IE:

document.documentElement.currentStyle [ "fontFamily"]

in Firefox/Opera:

Ci è un metodo chiamato getComputedStyle che dovrebbe restituire lo stile css per un dato elemento dato, ma non ho ancora trovato un modo per farlo tornare sull'intero documento.

Spero che questo aiuti un po '!

Answer 7

avevo bisogno della stessa cosa. qui ho trovato la migliore risposta.

https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle