根据设备宽度进行计数器更改

Question

I have using this php code for add clearfix div <div class="clearfix"></div> after 6 item in sequence. & it is working fine.

Here, I want to set Counter according to device width. that means, if, device width is more than 1024. So, Counter will calculate 6(add clearfix div after 6 item). & if device width is less than 1024 So. Counter will calculate 4(add clearfix div after 4 item).

I have this code: I have this code:

<?php $counter = 0; ?>
    <?php foreach ($categories as $category) { ?>

<div class="item"></div>
<?php 
        if(++$counter % 6 === 0) { ?>
          <div class="clearfix"></div>
        <?php  
        }
    } 
    ?>

It would look like this:

if device width is > 1024

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>

if device width is < 1024

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>

Some help would be appreciated. Thank you!

Answer 1

PHP runs on server. it doesn't know about the client machine width. howerver JS can get the width of the screen. so here is some trick to solve this

Step1: store width in cookie by JS on client machine when user comes on site by this code

var w = window.innerWidth;
document.cookie="screen_width="+w;

Step2: Now get cookie in php when needed the width of the screen

$screen_width = $_COOKIE['screen_width'];

Step3: Now you can use this width in your php code in the condition

<?php 
    $counter = 0;
    $screen_width = $_COOKIE['screen_width'];

    $limit = 4;
    if($screen_width>1024)
    {
        $limit = 6;
    }

    foreach ($categories as $category){
?>  
    <div class="item"></div>
        <?php 
        if(++$counter % $limit === 0) 
        { 
        ?>
          <div class="clearfix"></div>
        <?php  
        }
    } 
?>