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

Как автоматически получить высоту и ширину окна браузера с помощью jQuery при изменении?

  • 772

Как я могу получить высоту и ширину автоматически? То есть при изменении ширины или высоты окна браузера автоматически менять значения или автоматически давать значения при изменении размера окна браузера.

Я хочу отображать данные автоматически, не нажимая кнопки для получения данных. 

<!-- 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

    Лучше всего использовать медиа-запросы, https://developer.mozilla.org/es/docs/CSS/Media_queries .

    решая вашу проблему, я оставляю вам функциональную модификацию вашего кода

    $(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>

    Я оставляю вам тот же пример в jsFiddle

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

    Добавление:

    для разных устройств вам придется выполнять эти запросы

    $(window).resize(function(){

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

              // es un movil

       }     

});
    • 3