Mobile_Detect.php Returning me null as a user agent

i am using mobile_detect.php library to check whether the device is a mobile or tablet . Once it return me the correct user agent using this library i am loading separate layout on the basis of device. But sometimes it is returning me null instead of a Boolean value. I don't know why it is behaving in this way.

Then i researched a alot on google and find out that may be it is because of caching plugin that i am using on server or in wordpress backend.

I am using varnish cache on server and w3 total cache on wordpress. as i clear the cache it works but if i leave the cache and reload the page , script stops working.

I am trying to build a solution using javaScript in this case i am using mobile_detect.js for the purpose. and i am executing this code in head.

<script>

    function createCookie(name,value,days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
    }

    var md = new MobileDetect(window.navigator.userAgent);

    if (md.mobile()) {
        createCookie('noad_mobile','',-1);
        createCookie('noad_mobile',true,365);
    }
    else{
        createCookie('noad_mobile','',-1);
        console.log("coockie has been remove");
    }

</script> 

in php

<?php 
    $noad_mobile =  $_COOKIE['noad_mobile'];
    if($noad_mobile == false):
?>

HTML Content goes here

<?php endif; ?>

But this solution is working after reloading of the page because the php is server side language and it is getting executed before javascript. for this solution to work atleast the current page has to be refreshed for once which is not a good user experience.