it-swarm-id.com

Bagaimana saya bisa mendeteksi ukuran jendela dengan jQuery?

Bagaimana saya bisa mendeteksi ukuran jendela/browser dengan jQuery seperti Gmail? Di Gmail, kami tidak perlu me-refresh atau memuat ulang halaman saat ini segera setelah kami mengubah resolusi jendela dalam pengaturan jendela? Dalam proyek saya, saya perlu menyegarkan browser segera setelah pengaturan jendela telah diubah.

Ide apa pun akan dihargai.

48
PPShein

Anda tidak dapat menemukan resolusi layar dari halaman web. There is pernyataan CSS Media Queries untuk itu, tetapi itu diimplementasikan dengan buruk di sebagian besar perangkat dan browser, jika sama sekali. Namun, Anda tidak perlu mengetahui resolusi layar, karena mengubahnya menyebabkan lebar (piksel) jendela berubah, yang dapat dideteksi menggunakan metode yang telah dijelaskan orang lain:

$(window).resize(function() {
  // This will execute whenever the window is resized
  $(window).height(); // New height
  $(window).width(); // New width
});

Anda juga dapat menggunakan Kueri Media CSS di browser yang mendukungnya untuk menyesuaikan gaya halaman Anda dengan berbagai lebar tampilan, tetapi Anda harus benar-benar menggunakan em unit dan persentase dan min-width dan max-width di CSS Anda jika Anda menginginkan tata letak fleksibel yang tepat. Gmail mungkin menggunakan kombinasi dari semua ini.

73
Félix Saparelli

Anda membuat satu div di suatu tempat di halaman dan memasukkan kode ini:

<div id="winSize"></div>
<script>
    var WindowsSize=function(){
        var h=$(window).height(),
            w=$(window).width();
        $("#winSize").html("<p>Width: "+w+"<br>Height: "+h+"</p>");
    };
   $(document).ready(WindowsSize); 
   $(window).resize(WindowsSize); 
</script>

Berikut ini cuplikannya:

var WindowsSize=function(){
        var h=$(window).height(),
                w=$(window).width();
        $("#winSize").html("<p>Width: "+w+"<br>Height:"+h+"</p>");
 };
 $(document).ready(WindowsSize); 
 $(window).resize(WindowsSize); 
#winSize{
  position:fixed;
  bottom:1%;
  right:1%;
  border:rgba(0,0,0,0.8) 3px solid;
  background:rgba(0,0,0,0.6);
  padding:5px 10px;
  color:#fff;
  text-shadow:#000 1px 1px 1px,#000 -1px 1px 1px;
  z-index:9999
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="winSize"></div>

Tentu saja, sesuaikan untuk memenuhi kebutuhan Anda! ;)

16

Anda bisa mendapatkan nilai untuk lebar dan tinggi browser menggunakan yang berikut ini:

$(window).height();
$(window).width();

Untuk mendapat pemberitahuan saat browser diubah ukurannya, gunakan panggilan balik bind ini:

$(window).resize(function() {
    // Do something
});
7
cocoahero

Apakah Anda ingin mendeteksi ketika ukuran jendela telah diubah?

Anda dapat menggunakan JQuery's resize untuk melampirkan handler.

6
ANeves
//get dimensions 
var height = $(window).height();
var width = $(window).width();

//refresh on resize
$(window).resize(function() {
  location.reload(true)
});

tidak yakin apakah Anda ingin mengutak-atik dimensi elemen atau benar-benar menyegarkan halaman. jadi di sini banyak hal berbeda memilih apa yang Anda inginkan. Anda bahkan dapat menempatkan tinggi dan lebar di acara pengubahan ukuran jika Anda benar-benar menginginkannya.

5

Anda juga bisa menggunakan Javascript biasa window.innerWidth Untuk membandingkan lebar.

Tetapi gunakan .resize() jQuery yang dipecat secara otomatis untuk Anda:

$( window ).resize(function() {
  // your code...
}); 

http://api.jquery.com/resize/

1
Bradley Flood