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

Question

我已经使用这个php代码在6个项目后依次添加clearfix div <div class="clearfix"></div>。 ＆安培;它工作正常。

这里，我想根据设备宽度设置Counter。这意味着，如果，设备宽度大于1024.那么，计数器将计算6（在6项后添加clearfix div）。 ＆安培;如果设备宽度小于1024那么。计数器将计算4（在4项后添加clearfix div）。

我有这个代码： 我有这段代码：

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

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

看起来像这样：

如果设备宽度为＆gt; 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>

如果设备宽度<＆lt;

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>

一些帮助将不胜感激。谢谢！

Answer 1

PHP在服务器上运行。它不知道客户机的宽度。 howerver JS可以获得屏幕的宽度。所以这里有一些解决这个问题的技巧

步骤1：当用户通过此代码进入网站时，客户端计算机上的JS存储宽度

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

Step2：现在，当需要屏幕宽度时，在PHP中获取cookie

$screen_width = $_COOKIE['screen_width'];

Step3：现在您可以在条件中使用此代码中的宽度

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

Answer 2

您可以使用此javascript代码

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

我认为这会奏效。

happyCoding：D

Answer 3

Actuualy你需要使用javascript属性screen.width和screen.height。Php在这方面不起任何作用。

查看更多答案和意见here