php - JQuery 获取屏幕大小，php 生成图像？好方法？

Question

我正在为用户开发一个统计面板，其中显示的图像是带宽使用统计数据(一天、两天等)。我打算只使用带有框架的 php，但我想有一个更动态的设计，这样图像和设计就可以适合用户屏幕大小，所以我正在尝试使用 JQuery 来询问用户分辨率，然后生成使用 php 的确切图像。

Javascript 读取屏幕尺寸 (imgsize()) 并将值传递给 php 脚本 (stats_generatemain(tipo))。 php 脚本生成图像，然后 Javascript 重新加载图像 div 容器 (#mstats) 以显示新的 php 生成的图像。

这样做好吗？你会换一种方式吗？

非常感谢。

<script>
  $(document).ready(function () {
    $.ajaxSetup({
      cache: false
    });

    function imgsize() {

      var myWidth = screen.availWidth;
      var myHeight = screen.availHeight;
      myRatio = myWidth / myHeight;
      myWidth = myWidth - 504;
      myHeight = myWidth / myRatio;

      var dim = new Array(2);
      dim[0] = myWidth;
      dim[1] = myHeight;
      return dim;
    }

    function mstats_resize_start() {
      var dim = imgsize();
      $('#mstats').width(dim[0]).height(430);
    }

    function stats_generatemain(tipo) { 
        if(tipo==''){tipo=1;}
        else{tipo=parseInt(tipo);}
        var dim = imgsize();
        $.ajax({ 
             url: 'stats_generatemain.php',
             type: 'get',
             data: {imsi: '214290000000003',tipo: tipo, w: dim[0], h: 430},
             beforeSend: function(){
                $("#mstats").hide();
                $('#mloading').show();
             },
             success: function(){
                var href = "./TEMP/trafico-214290000000003-main.jpg?" + Math.random();
                $("#mstats").attr("src", href);
             },
             complete: function(){
                $('#mloading').hide();
                $("#mstats").show();
             }
        });
    }

    stats_generatemain(1);

    $("a.link").live('click', function (e) {
      e.preventDefault();
      var tipo = this.href.split(/=/)[1];
      stats_generatemain(tipo);
    });

    $('li > a').click(function () {
      $('li').removeClass();
      $(this).parent().addClass('active');
    });


    jQuery.event.add(window, "load", mstats_resize_start);

  });
</script>

Answer 1

我想您可能想多了……为什么不直接使用响应式设计/流畅的图片呢？将一个类应用于使用以下 css 的图像:

max-width:100%;

高度将自动计算。

我建议查看 Twitter Bootstrap如果你想要一个不错的响应式设计框架。如果您不太擅长设计，bootstrap 可以帮助您减轻大部分工作负担，让您专注于编程方面。