jquery $ (window) .width () dan $ (window) .height () mengembalikan nilai yang berbeda ketika viewport belum diubah ukurannya

Saya menulis situs menggunakan jquery yang berulang kali memanggil $(window).width()dan $(window).height()memposisikan serta elemen ukuran berdasarkan ukuran viewport.

Dalam pemecahan masalah saya menemukan bahwa saya mendapatkan laporan ukuran viewport yang sedikit berbeda dalam panggilan berulang ke fungsi jquery di atas ketika viewport tidak diubah ukurannya.

Bertanya-tanya apakah ada kasus khusus yang diketahui siapa pun ketika ini terjadi, atau apakah memang begini adanya. Perbedaan ukuran yang dilaporkan adalah 20 piksel atau kurang, tampaknya. Itu terjadi di Safari 4.0.4, Firefox 3.6.2 dan Chrome 5.0.342.7 beta di Mac OS X 10.6.2. Saya belum menguji browser lain karena tampaknya tidak spesifik untuk browser tersebut. Saya juga tidak dapat mengetahui apa perbedaannya, jika bukan ukuran area pandang, mungkinkah ada faktor lain yang membuat hasil berbeda?

Semua wawasan akan dihargai.

memperbarui:

Bukan nilai $(window).width()dan $(window).height()yang berubah. Ini adalah nilai variabel yang saya gunakan untuk menyimpan nilai di atas.

Bukan scrollbar yang memengaruhi nilai, tidak ada scrollbar yang muncul saat nilai variabel berubah. Berikut adalah kode saya untuk menyimpan nilai dalam variabel saya (yang saya lakukan supaya lebih pendek).

(semua ini ada di dalam $(document).ready())

// awalnya mendeklarasikan variabel agar terlihat oleh fungsi otehr di dalamnya .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()

Saya memasukkan pernyataan peringatan untuk menyelidiki variabel di atas terhadap nilai yang seharusnya mereka pegang. The $(item).param()nilai tetap konsisten, tetapi variabel saya berubah untuk alasan yang saya tidak tahu.

Saya telah mencari tempat-tempat di mana kode saya mungkin mengubah nilai variabel yang dimaksud, sebagai lawan hanya mengambil nilai yang ditetapkan dan tidak dapat menemukannya. Saya dapat memposting seluruh shebang di suatu tempat jika itu memungkinkan.

Saya pikir apa yang Anda lihat adalah menyembunyikan dan menampilkan scrollbar. Berikut demo singkat yang menunjukkan perubahan lebar .

Selain itu: apakah Anda perlu melakukan polling secara konstan? Anda mungkin dapat mengoptimalkan kode Anda untuk dijalankan pada acara pengubahan ukuran, seperti ini:

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

Coba gunakan a

• $(window).load peristiwa

atau

• $(document).ready

  karena nilai awal mungkin tidak konstan karena perubahan yang terjadi selama penguraian atau selama pemuatan DOM.

Perhatikan bahwa jika masalah tersebut disebabkan oleh munculnya scrollbar, meletakkan

body {
  overflow: hidden;
}

di CSS Anda mungkin merupakan perbaikan yang mudah (jika Anda tidak membutuhkan halaman untuk menggulir).

Saya mengalami masalah yang sangat mirip. Saya mendapatkan nilai height () yang tidak konsisten saat menyegarkan halaman saya. (Itu bukan variabel saya yang menyebabkan masalah, itu adalah nilai ketinggian yang sebenarnya.)

Saya perhatikan bahwa di bagian atas halaman saya, saya memanggil skrip saya terlebih dahulu, kemudian file css saya. Saya beralih sehingga file css ditautkan terlebih dahulu, kemudian file skrip dan tampaknya telah memperbaiki masalah sejauh ini.

Semoga membantu.