Identify screen size to load content asynchronously

Question

I have a script that does reload every 10 seconds, loading a page into a div:

<script type="text/javascript">

    var tempo = 10000;
    function listar() {
        $.ajax({
            url:"lista.php",
            success: function (textStatus) {      
                $('#lista').html(textStatus);
            }
        }); 
    }

    function reload() {
        location.reload();
    }

    $(function() {  
        listar();
        setInterval(listar, tempo);
        setInterval(reload, 1800000);
    });

</script>

---

I would like that script, recognizes the type/size of screen (monitor, mobile phone, etc.) and load the file for the size.

Example:

When the screen is one monitor: carry php list.

When the screen is one cellular: carry lista_cel.php

Answer 1

You could capture the screen size and with it make the condition to check the screen size and tell which php file will be called.

Adding the following code will take the window dimensions:

var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

Changing the function listar() for listar(arquivo), to receive the file that will be called:

function listar(arquivo) {
    $.ajax({
        url: arquivo,
        success: function (textStatus) {      
            $('#lista').html(textStatus);
        }
    }); 
}

Finally, it uses the windowwidth variable to receive the width of the screen and makes the conditions by checking the width and setting which file will be called.

$(function() {
    var arquivo = "lista.php";

    var windowWidth = window.innerWidth;

    if (windowWidth < 1000 && windowWidth >= 400)
        arquivo = "lista_tablet.php";
    else
    if (windowWidth < 400)
        arquivo = "lista_cel.php";

    listar(arquivo);
    setInterval(listar(arquivo), tempo);
    setInterval(reload, 1800000);
});