Untitled

how to load a diferrent php file dynamically based on the browser window's width using jQuery or any other method
function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css");
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

function setLocation(url) {
   if (window.location.href.indexOf(url) === -1)
      window.location = url;
}

function reloadPage(width) {
    width = parseInt(width);
    if (width < 701) {
        setLocation("yournarrowpage.php");
    } else if (width < 900) {
        setLocation("yourmediumpage.php");
    } else {
        setLocation("yourwidepage.php");
    }
}

$(function() {
   reloadPage($(this).width());
   $(window).resize(function() {
       reloadPage($(this).width());
   });
});

function setLocation(url) {
   $("selector for the element to reload").load(url);
}

$(document).load(function() {
    var $width = $(window).width()
    if($width < 701)
        window.location = 'narrow.php'
    else if($width < 900)
        window.location = 'medium.php'
    else
        window.location = 'wide.php'
})

if(stristr($_SERVER['HTTP_USER_AGENT'], 'Mozilla/5.0(iPad;')) {
     // probably an iPad
     require('ipad.php');
     //Or maybe the below might serve you better:
     /*
     header('Location:ipad.php');
     die();
     */
}

if (width < 701) {
    $.get('yourlayoutfor701.php', function(data) {
    $('#your_layout').html(data);
    });
 }