JQuery获取屏幕大小和PHP生成图像¿很好的方式？

Question

Im developing a stadistics panel for users, where the images shown are bandwith usage stadistics (from one day, from 2 days, etc.). I was going to use only php, with frames, but I would like to have a more dinamic design so the images and the design could fit the user screen size, so I'm trying with JQuery to ask for the user resolution and then generate the exact images with php.

The Javascript does the screen size reading (imgsize()) and passes the values to the php script (stats_generatemain(tipo)). The php script generates the image and then the Javascript reloads the image div container (#mstats) to show the new php generated image.

Is this a good way to do it? Would you do it another way?

Thanks very much.

<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

I think you may be over-thinking this... why not just use responsive design / fluid images? Apply a class to your image that uses the following css:

max-width:100%;

Height will be automatically calculated.

I'd suggest looking at Twitter Bootstrap if you want a nice responsive design framework. If you're not too good at designing things, bootstrap can help take much of the work load off and allow you to focus on the programming side.