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

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!

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  
        }
    } 
?>

Actuualy you would need to use javascript property screen.width and screen.height.Php cannot make any role in this.

See more answers and the opinions here

You can use this javascript code

<script> var iDiv = document.createElement('div'); iDiv.className = 'item'; var cfDiv = document.createElement('div'); cfDiv.className = 'clearfix'; var myWidth=screen.width; if(myWidth>=1024) { for(i=1; i<=2; i++) { for(j=1; j<=6; j++) { document.getElementsByTagName('body')[0].appendChild(iDiv); } document.getElementsByTagName('body')[0].appendChild(cfDiv); } } else { for(i=1; i<=3; i++) { for(j=1; j<=4; j++) { document.getElementsByTagName('body')[0].appendChild(iDiv); } document.getElementsByTagName('body')[0].appendChild(cfDiv); } } </script>

I think this will work.

happyCoding :D