Home / Questions / 40944
Accepted
Otto
Asked: 2020-12-26 18:34:44 +0800 CST 2020-12-26 18:34:44 +0800 CST

How to get browser window height and width automatically with jQuery when changed?

  • 772

How can I get the height and width automatically? That is, when changing the width or height of the browser window, automatically change the values ​​or automatically give the values ​​when resizing the browser window.

I want to display the data automatically without having to perform the action of pressing the buttons to get the data. 

<!-- Función para obtener el Ancho(Width) --> 
function obtenerAncho( obj, ancho ) {
  $( "#anvent" ).text( "El ancho de la " + obj + " es " + ancho + "px. (Width)" );
}

<!-- Función para obtener el Alto(Height) --> 
function obtenerAlto( obj, alto ) {
  $( "#alvent" ).text( "El alto de la " + obj + " es " + alto + "px. (Height)" );
}
obtenerAlto( "ventana", $( window ).height() );
     obtenerAncho( "ventana", $( window ).width() );
$(window).resize(function(){


          obtenerAlto( "ventana", $( window ).height() );
     obtenerAncho( "ventana", $( window ).width() );
 

});
.btncls {
 padding: 10px;
 background-color:#000;
 color:#fff;
 border:none;
 cursor:pointer;
 margin:10px;
}
.txtcls{
 color:#44f;
 font-size:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="btncls" id="obtan">Obtener ancho</button>
<button class="btncls" id="obtal">Obtener alto</button>
<div class="txtcls" id="anvent">&nbsp;</div>
<div class="txtcls" id="alvent">&nbsp;</div>

jquery

1 Answers

  1. Best Answer

    The best thing would be to use the media-queries, https://developer.mozilla.org/es/docs/CSS/Media_queries

    solving your problem I leave you a functional modification of your code

    $(function () {
<!-- Función para obtener el Ancho(Width) --> 
function obtenerAncho( obj, ancho ) {
  $( "#anvent" ).text( "El ancho de la " + obj + " es " + ancho + "px. (Width)" );
}

<!-- Función para obtener el Alto(Height) --> 
function obtenerAlto( obj, alto ) {
  $( "#alvent" ).text( "El alto de la " + obj + " es " + alto + "px. (Height)" );
}
obtenerAlto( "ventana", $( window ).height() );
     obtenerAncho( "ventana", $( window ).width() );
$(window).resize(function(){


          obtenerAlto( "ventana", $( window ).height() );
     obtenerAncho( "ventana", $( window ).width() );
 

});
});
    .btncls {
 padding: 10px;
 background-color:#000;
 color:#fff;
 border:none;
 cursor:pointer;
 margin:10px;
}
.txtcls{
 color:#44f;
 font-size:20px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="txtcls" id="anvent">&nbsp;</div>
<div class="txtcls" id="alvent">&nbsp;</div>

    I leave you the same example in jsFiddle

    https://jsfiddle.net/rn3w/40gLkmfg/

    Adding:

    for the different devices you will have to do these queries

    $(window).resize(function(){

       if ($(window).width() <= 320) {  

              // es un movil

       }     

});
    • 3