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