jquery $ (pencere) .width () ve $ (pencere) .height (), görünüm alanı yeniden boyutlandırılmadığında farklı değerler döndürür

Tekrar tekrar çağıran $(window).width()ve $(window).height()öğeleri görüntü alanı boyutuna göre konumlandırmak ve boyutlandırmak için jquery kullanan bir site yazıyorum .

Sorun gidermede, görüntü alanı yeniden boyutlandırılmadığında yukarıdaki jquery işlevlerine yapılan tekrarlanan çağrılarda biraz farklı görüntü alanı boyutu raporları aldığımı keşfettim.

Bunun ne zaman gerçekleştiğini bildiği özel bir durum olup olmadığını veya bunun böyle olup olmadığını merak ediyorum. Bildirilen boyutlardaki fark 20 piksel veya daha az görünüyor. Mac OS X 10.6.2'de Safari 4.0.4, Firefox 3.6.2 ve Chrome 5.0.342.7 beta sürümlerinde gerçekleşir. Diğer tarayıcıları henüz test etmedim çünkü tarayıcıya özel görünmüyor. Ayrıca farkın neye bağlı olduğunu da anlayamadım, eğer görüntü alanı boyutu değilse, sonuçları farklı kılan başka bir faktör olabilir mi?

Herhangi bir içgörü takdir edilecektir.

Güncelleme:

Değişen $(window).width()ve değerleri değildir $(window).height(). Yukarıdakilerin değerlerini saklamak için kullandığım değişkenlerin değerleri.

Değerleri etkileyen kaydırma çubukları değildir, değişken değerleri değiştiğinde kaydırma çubukları görünmez. Değişkenlerimdeki değerleri depolamak için kodum burada (sadece daha kısa olmaları için yapıyorum)

(tüm bunlar içeride $(document).ready())

// başlangıçta içindeki otehr işlevlerine görünür olacak değişkenleri bildirin .ready()

var windowWidth = $(window).width(); //retrieve current window width
var windowHeight = $(window).height(); //retrieve current window height
var documentWidth = $(document).width(); //retrieve current document width
var documentHeight = $(document).height(); //retrieve current document height
var vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
var hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position


function onm_window_parameters(){ //called on viewer reload, screen resize or scroll

    windowWidth = $(window).width(); //retrieve current window width
    windowHeight = $(window).height(); //retrieve current window height
    documentWidth = $(document).width(); //retrieve current document width
    documentHeight = $(document).height(); //retrieve current document height
    vScrollPosition = $(document).scrollTop(); //retrieve the document scroll ToP position
    hScrollPosition = $(document).scrollLeft(); //retrieve the document scroll Left position

}; //end function onm_window_parameters()

Yukarıdaki değişkenleri tutmaları gereken değerlerle karşılaştırmak için bir uyarı ifadesi ekledim. $(item).param()Değerleri tutarlı kalmak ama benim değişkenler ben çözemiyorum nedenlerle değiştirin.

Kodumun söz konusu değişkenlerin değerini değiştirebileceği yerleri aradım, sadece set değerlerini almanın aksine ve hiçbirini bulamadım. Eğer bir olasılık varsa, bütün meseleyi bir yere gönderebilirim.

Sanırım gördüğünüz, kaydırma çubuklarının saklanması ve gösterilmesi. İşte genişlik değişikliğini gösteren hızlı bir demo .

Bir kenara: sürekli anket yapmanız gerekiyor mu? Kodunuzu aşağıdaki gibi yeniden boyutlandırma etkinliğinde çalışacak şekilde optimize edebilirsiniz:

$(window).resize(function() {
  //update stuff
});

Kullanmayı dene

• $(window).load Etkinlik

veya

• $(document).ready

  çünkü ayrıştırma sırasında veya DOM yüklemesi sırasında meydana gelen değişiklikler nedeniyle başlangıç ​​değerleri tutarsız olabilir.

Sorun, görünen kaydırma çubuklarından kaynaklanıyorsa,

body {
  overflow: hidden;
}

CSS'nizde kolay bir düzeltme olabilir (kaydırmak için sayfaya ihtiyacınız yoksa).

Çok benzer bir problem yaşıyordum. Sayfamı yenilediğimde tutarsız yükseklik () değerleri alıyordum. (Soruna neden olan benim değişkenim değildi, gerçek yükseklik değeriydi.)

Sayfamın başlığında önce komut dosyalarımı, ardından css dosyamı çağırdığımı fark ettim. Önce css dosyası, ardından komut dosyası dosyaları bağlanacak şekilde değiştirdim ve bu şimdiye kadar sorunu çözmüş görünüyor.

Umarım yardımcı olur.