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

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>

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.

JQuery gets sreen size and php generates the images ¿good way?

from your subject and title I say this answer:

.screenSize{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  visibility:hidden;
  display:none;
 }

and this is your jquery code:

$(function(){
   var width=$(".screenSize").width();
   var height=$(".screenSize").height();
 })

and do other what you want with php, You can send your data with ajax and do something