PHP conditions depending on window width (media queries?)

Question

I have a responsive website and I need some PHP conditions depending on the windows width (or media queries).

Example:

if ($window_width > 1400px) {
    echo 'Your window is wider than 1400px';
}

elseif ($window_width > 1000px) AND ($window_width < 1399px) {
    echo 'Your window is between 1000px and 1399px';
}

else {
    echo 'Your window is narrower than 1000px.';
}

Thanks for your help!

Answer 1

check this

Goolgle Mobile Detect

Try to use http://www.php.net/get_browser and check for isMobileDevice field. It might help only, of course, if the path to browscap.ini is set up in php.ini. If not, you can use php classes like https://github.com/garetjax/phpbrowscap

Answer 2

Nope you can not do it with php. php is strictly server side

user javascript instead. Below is my code to get device resolution using javascript

<script>
     screenWidth = window.screen.width,
     screenHeight = window.screen.height;
    console.log(screenWidth);
    console.log(screenHeight);
</script> 

Answer 3

I'm assuming this is for device detection. I'm not sure if you can detect window width using PHP alone. If you can then this information would appear in the HTTP headers. I would recommend using an open source PHP class built for this: http://mobiledetect.net/

Answer 4

Here is the trick: Evaluate the window width with js, then load your PHP in a frame and put the width in a parameter. Your PHP script then can read that parameter and perform different conditions depending on that value.

Here is the js part:

<script type="text/javascript">
    var width = window.innerWidth;
    document.write('<iframe src="content.php?w='+width+'"></iframe>');
</script>

Within your content.php file just read the width parameter and do something with it:

<?php
    //Get width of browser window
    $width = $_GET['w'];
    echo ('width: '.$width);
?>

Answer 5

In views you can show/hide divs, something like this:

<style>
    #web {display: block;}
    #mobile {display: none;}

    @media screen and (max-width: 320px) {
        #web {display: none;}
        #mobile {display: block;}
    }
</style>

<div id="mobile">
    <?php echo "is mobile"; //include("page_mobile.phtml"); ?>
</div>

<div id="web">
    <?php echo "is web"; //include("page_web.phtml"); ?>
</div>