Geçerli tarayıcı genişliğini almak için bir JavaScript işlevi yazmaya çalışıyorum. JavaScript kodu kullanılarak tarayıcı genişliği nasıl alınır?
buldum bu bir:javascript:alert(document.body.offsetWidth);
Ama vücut genişliği% 100 sahipse başarısız olduğunu onun sorunu.
Başka bir işlev veya geçici çözüm var mı?
pain in the ass ürünüdür. Saçma sapan atlamayı ve jQuery'u kullanmanızı öneririm, bu da sadece $(window).width() yapmanıza izin verir.
için Güncelleştirme. Tarayıcılar arası tutarlılığı korumak için iyi bir iş yapmak için jQuery ekibine güveniyorum. Ancak, tüm kütüphaneyi dahil etmek gerekli değildir. JQuery kaynağında, ilgili bölüm line 37 of dimensions.js'da bulunur. Burada çıkarılan ve başına çalışır şekilde değiştirilir: tüm tarayıcılar farklı davranır yana
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());, önce değerler için test etmek gerekir ve ardından edeceğiz Doğru olanı kullan. İşte size bunu yapan bir fonksiyon açıklanmıştır: yükseklik için
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: scriptlerinizdeki
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;
}
}
Çağrı Bunlardan ikisi getWidth() veya getHeight() kullanarak. Tarayıcının yerel özellikleri tanımlı değilse, undefined döndürür.
En iyi cevap, tarayıcı penceresi genişliği –
'a göre basit bir yönlendirme için bir 33k kitaplığı eklemem gerekmediğinden, jQuery'nin uygulanmasıyla tutarlı bir şekilde (doğru) elde edilen sonuç (sonuç) elde edilir. – unekwu
... Bu üç gösterinin her biri bazı sonuçları gösterir ve tüm sonuçlar (genişlikler) farklıdır. Örneğin Google Chrome’da 'self.innerWidth 423', document.documentElement.clientWidth 326' ve' document.body.clientWidth 406' bakın. Böyle bir durumda soru: hangisi doğru ve hangisi? Örneğin google haritasını yeniden boyutlandırmak istiyorum. 326 veya 423 büyük fark. Eğer genişlik 700 ise, o zaman 759, 735, 742 (o kadar büyük fark yoktur) – user2118559
İşte kısa yukarıda sunulan fonksiyonun sürümü:
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;
}
Tüm koşullar yanlışsa bir değer döndürme başarısız. –
Elseslere ihtiyacınız yok :) – Nick
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;
dönüş tamsayılar Hem ve jQuery gerektirmez. Çapraz tarayıcı uyumlu.
Sık sık jQuery IE karanlık çağlara geri genişliği() ve yükseklik() W3Schools itibaren
Spot on! Bence en iyi cevap. –
Safari iphone'da bunu kullanırken sorun mu yaşıyorsunuz? –
ve çapraz tarayıcı için geçersiz değerleri döndürür bulun!
<!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>
Neden kimse kimden bahseder?
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, ama android varsayılan ve android krom tarayıcıları, masaüstü krom test sınamak mı iyi çalışıyor gibi şimdiye kadar görünüyor.
Elbette sayı değerini döndürmez, ancak boole döndürür - eğer eşleşirse veya eşleşmiyorsa, tam olarak soruyu tam olarak uymayabilir, ancak istediğimiz de budur ve muhtemelen soruların yazarıdır.
Harika, teşekkürler! –
Sadece IE10 + 'yu destekler. – qarthandso
IE9 veya daha eski kullanıyorlarsa, interneti hak etmiyorlar. –
Doğru hatırladım, jQuery çekirdek boyutuna çok boyut kattı. Önerdiğin şeyi yapmak için hala boyutlara ihtiyacınız var mı? – Nosredna
Yapmadığınızı ortaya çıkarır. Hangisi harika. Düzenlenen yanıt. Head-up için teşekkürler. – chaos
jQuery'deki $ (window) .width() desteği, herhangi biriyle ilgili olması durumunda sürüm 1.2'den beridir. – chaos