Sto cercando di scrivere una funzione JavaScript per ottenere l'attuale larghezza del browser.
Ho trovato questo:
javascript:alert(document.body.offsetWidth);Ma il suo problema è che fallisce se il corpo ha una larghezza del 100%.
C'è qualche altra funzione migliore o una soluzione alternativa?
Risposte:
La mia risposta originale è stata scritta nel 2009. Mentre funziona ancora, mi piacerebbe aggiornarlo per il 2017. I browser possono comunque comportarsi diversamente. Confido che il team di jQuery faccia un ottimo lavoro nel mantenere la coerenza tra browser. Tuttavia, non è necessario includere l'intera libreria. Nella fonte jQuery, la parte pertinente si trova nella riga 37 di dimension.js . Qui viene estratto e modificato per funzionare autonomamente:
function getWidth() {
return Math.max(
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
);
}
function getHeight() {
return Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.body.offsetHeight,
document.documentElement.offsetHeight,
document.documentElement.clientHeight
);
}
console.log('Width: ' + getWidth() );
console.log('Height: ' + getHeight() );Poiché tutti i browser si comportano in modo diverso, dovrai prima verificare i valori, quindi utilizzare quello corretto. Ecco una funzione che fa questo per te:
function getWidth() {
if (self.innerWidth) {
return self.innerWidth;
}
if (document.documentElement && document.documentElement.clientWidth) {
return document.documentElement.clientWidth;
}
if (document.body) {
return document.body.clientWidth;
}
}e similmente per l'altezza:
function getHeight() {
if (self.innerHeight) {
return self.innerHeight;
}
if (document.documentElement && document.documentElement.clientHeight) {
return document.documentElement.clientHeight;
}
if (document.body) {
return document.body.clientHeight;
}
}Chiama entrambi questi nei tuoi script usando getWidth()o getHeight(). Se nessuna delle proprietà native del browser è definita, verrà restituito undefined.
self.innerWidth 423, document.documentElement.clientWidth 326e document.body.clientWidth 406. In tal caso domanda: quale è corretto e quale utilizzare? Ad esempio, voglio ridimensionare google map. 326 o 423 grande differenza. Se larghezza ~ 700, vedi 759, 735, 742 (differenza non così grande)
var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);e var windowWidth = self.innerWidth || -1;// a causa di "body" o "screen" o "document" non sono la "finestra" se si controlla un contenuto di HTML in overflow che si può capire. # i.stack.imgur.com/6xPdH.png
getWidth()riferimenti di funzioneself.innerHeight
È un dolore nel culo . Ti consiglio di saltare le sciocchezze e di usare jQuery , che ti consente di farlo $(window).width().
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;Entrambi restituiscono numeri interi e non richiedono jQuery. Compatibile con più browser.
Trovo spesso che jQuery restituisca valori non validi per width () e height ()
Perché nessuno menziona matchMedia?
if (window.matchMedia("(min-width: 400px)").matches) {
/* the viewport is at least 400 pixels wide */
} else {
/* the viewport is less than 400 pixels wide */
}Non ho testato così tanto, ma testato con i browser Android predefiniti e Android Chrome, Chrome desktop, finora sembra che funzioni bene.
Ovviamente non restituisce il valore numerico, ma restituisce valori booleani - se corrisponde o no, quindi potrebbe non corrispondere esattamente alla domanda, ma è comunque quello che vogliamo e probabilmente l'autore della domanda vuole.
Da W3schools e il suo cross browser alle epoche buie di IE!
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";
alert("Browser inner window width: " + w + ", height: " + h + ".");
</script>
</body>
</html>Ecco una versione più breve della funzione presentata sopra:
function getWidth() {
if (self.innerWidth) {
return self.innerWidth;
}
else if (document.documentElement && document.documentElement.clientHeight){
return document.documentElement.clientWidth;
}
else if (document.body) {
return document.body.clientWidth;
}
return 0;
}Una soluzione adattata alla moderna risposta di JS di Travis:
const getPageWidth = () => {
const bodyMax = document.body
? Math.max(document.body.scrollWidth, document.body.offsetWidth)
: 0;
const docElementMax = document.documentElement
? Math.max(
document.documentElement.scrollWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth
)
: 0;
return Math.max(bodyMax, docElementMax);
};Un'aggiunta importante alla risposta di Travis; è necessario inserire getWidth () nel corpo del documento per assicurarsi che venga conteggiata la larghezza della barra di scorrimento, altrimenti la larghezza della barra di scorrimento del browser sottratta da getWidth (). Cosa ho fatto ;
<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
</body>e in seguito chiama una variabile Larghezza ovunque.