如何在调整浏览器大小时更改sql查询

Question

我想写一个平台，它可以加载不同的数据取决于浏览器的大小，它是一个响应平台，我在我的mysql数据库中有4列，他们命名为“mobile”，“tablet”，“sdevice”for小型设备和大型设备的“ldevice”，我的目的是当客户端调整浏览器大小时，php更改数据，例如从sdevice到ldevice， 我想要在没有刷新页面的情况下发生这种情况;这就是我做的，

<div class=" text-center" style=" color: white; position: relative;">
    <img src="images/image02.jpg" alt="" style="">
    <a href="#group">
      <div class="holder" style="position: absolute; top:0;width: 100%;height:100%;">
          <div  style="margin: 10px 50px; ">
            <img src="images/arrow.png" alt="" style="position: absolute; top: 10px;">
            <img src="images/arrow.png" alt="" style="position: absolute; bottom: 0;">
            <div class="text-content" data-target = "1" style="margin:0 auto; width: 680px;  position: relative; top: 15px; ">
              <script type="text/javascript">
                var width = $(window).width();
                if ( width < 768) {
                  $('.text-content:eq(1)').html('<?php echo $mobile[1]?>')
                }else if(width > 768 && width < 992){
                  $('.text-content:eq(1)').html('<?php echo $tablet[1]?>')
                }else if(width > 992 && width < 1200){
                  $('.text-content:eq(1)').html('<?php echo $sdevice[1]?>')
                }else if(width > 1200){
                  $('.text-content:eq(1)').html('<?php echo $ldevice[1]?>')
                };
                $(window).resize(function() {
                  width = $(window).width();
                  console.log(width);
                  if ( width < 768) {
                    $('.text-content:eq(1)').html('<?php echo $mobile[1]?>')
                  }else if(width > 768 && width < 992){
                    $('.text-content:eq(1)').html('<?php echo $tablet[1]?>')
                  }else if(width > 992 && width < 1200){
                    $('.text-content:eq(1)').html('<?php echo $sdevice[1]?>')
                  }else if(width > 1200){
                    $('.text-content:eq(1)').html('<?php echo $ldevice[1]?>')
                  };
                });
              </script>
            </div>
          </div>
      </div>
    </a>
  </div>

"button"

Answer 1

您可以使用'resize'事件。

$(document).on('resize', function(){

...

});