Geçerli tarayıcı genişliğini elde etmek için bir JavaScript işlevi yazmaya çalışıyorum.
Bunu buldum:
javascript:alert(document.body.offsetWidth);Ancak vücudun genişliği% 100 ise başarısız olması sorunu.
Daha iyi bir işlev veya bir çözüm var mı?
Geçerli tarayıcı genişliğini elde etmek için bir JavaScript işlevi yazmaya çalışıyorum.
Bunu buldum:
javascript:alert(document.body.offsetWidth);Ancak vücudun genişliği% 100 ise başarısız olması sorunu.
Daha iyi bir işlev veya bir çözüm var mı?
Yanıtlar:
Orijinal cevabım 2009'da yazıldı. Hala çalışıyor olsa da, 2017 için güncellemek istiyorum. Tarayıcılar yine de farklı davranabilir. Tarayıcılar arası tutarlılığı sağlamada harika bir iş çıkarması için jQuery ekibine güveniyorum. Ancak, tüm kütüphaneyi dahil etmek gerekli değildir. JQuery kaynağında, ilgili kısım, dimension.js'nin 37. satırında bulunur . Burada bağımsız çalışmak için çıkarılır ve değiştirilir:
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() );Tüm tarayıcılar farklı davrandığından, önce değerleri test etmeniz ve ardından doğru olanı kullanmanız gerekir. İşte bunu sizin için yapan bir işlev:
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;
}
}ve benzer şekilde yükseklik için:
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;
}
}Komut dosyalarınızda getWidth()veya ikisini birden kullanarak çağırın getHeight(). Tarayıcının yerel özelliklerinden hiçbiri tanımlanmazsa geri döner undefined.
self.innerWidth 423, document.documentElement.clientWidth 326ve document.body.clientWidth 406. Böyle bir durumda soru: hangisi doğrudur ve hangisi kullanılır? Örneğin ben google harita yeniden boyutlandırmak istiyorum. 326 veya 423 büyük fark. Genişlik ~ 700 ise, bkz. 759, 735, 742 (çok büyük fark değil)
var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);ve var windowWidth = self.innerWidth || -1;// nedeniyle "gövde" ya da "ekran" ya da "belge" html taşan bir içeriği kontrol edebilirsiniz anlıyorsanız "pencere" değildir. # i.stack.imgur.com/6xPdH.png
getWidth()başvurularıself.innerHeight
Bu kıçından bir acı . Saçmalamayı atlamanızı ve sadece yapmanıza izin veren jQuery kullanmanızı öneririm $(window).width().
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;Her ikisi de tamsayı döndürür ve jQuery gerektirmez. Çapraz tarayıcı uyumlu.
Genellikle jQuery width () ve height () için geçersiz değerler döndürür
Neden kimse matchMedia'dan bahsetmiyor?
if (window.matchMedia("(min-width: 400px)").matches) {
/* the viewport is at least 400 pixels wide */
} else {
/* the viewport is less than 400 pixels wide */
}O kadar test etmedi, ancak android varsayılan ve android krom tarayıcıları, masaüstü kromu ile test edildi, şimdiye kadar iyi çalışıyor gibi görünüyor.
Tabii ki sayı değeri döndürmez, ancak boolean döndürür - eşleşir veya eşleşmezse, soruya tam olarak uymayabilir, ancak yine de istediğimiz şeydir ve muhtemelen soru yazarı ister.
W3schools ve çapraz tarayıcısından geri IE'nin karanlık çağlarına!
<!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>Yukarıda sunulan fonksiyonun daha kısa bir versiyonu:
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;
}Travis'in cevabının modern JS'sine uyarlanmış bir çözüm:
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);
};Travis'in cevabına önemli bir katkı; kaydırma çubuğu genişliğinin sayıldığından emin olmak için getWidth () öğesini belge gövdesine koymanız gerekir; aksi takdirde tarayıcının getWidth () öğesinden çıkarılan kaydırma çubuğu genişliği. Ben ne yaptım ;
<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>ve daha sonra herhangi bir yere aWidth değişkenini çağırın.