基于设备宽度的计数器更改
我已经使用这个php代码在6项后按顺序添加clearfix <div class="clearfix"></div>。&它运行得很好。
在这里，我想根据设备的宽度设置计数器。这意味着，如果，设备宽度大于1024。因此，计数器将计算6(在6项后添加清除div )。&如果设备宽度小于1024，则为。计数器将计算4(在4项后添加清除div )。
我有这样的代码：，我有这个代码：
<?php $counter = 0; ?>
<?php foreach ($categories as $category) { ?>
<div class="item"></div>
<?php
if(++$counter % 6 === 0) { ?>
<div class="clearfix"></div>
<?php
}
}
?>--看起来是这样的：
如果设备宽度> 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>如果设备宽度< 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>如果能提供一些帮助，我们将不胜感激。谢谢!
回答 3
Stack Overflow用户
发布于 2014-08-04 12:21:14
PHP在服务器上运行。它不知道客户端机器的宽度。但是JS可以获得屏幕的宽度。下面是一些解决这个问题的窍门
Step1:当用户通过以下代码出现时，JS在客户端机器上将宽度存储在cookie中
var w = window.innerWidth;
document.cookie="screen_width="+w;Step2:当需要屏幕宽度时，现在在php中获取cookie
$screen_width = $_COOKIE['screen_width'];Step3:现在可以在条件下在php代码中使用此宽度
<?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
}
}
?>Stack Overflow用户
发布于 2014-08-04 12:29:42
可以使用此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
Stack Overflow用户
发布于 2014-08-04 12:15:34
实际上，您需要使用javascript property screen.width，而screen.height.Php不能在其中扮演任何角色。
见更多答案和意见here
https://stackoverflow.com/questions/25118310
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号