具有屏幕宽度条件的PHP

发布时间:2022-04-30 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了具有屏幕宽度条件的PHP脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
如果屏幕度小于480px(移动设备,响应),我试图限制我在wordpress上的帖子.

但是我遇到了问题,因为我发现你不能使用PHP来检测屏幕宽度,这是我需要的,因为我使用PHP调整帖子号码.我希望有类似的东西:

@H_301_13@<?PHP /* Start the Loop */ ?> <?PHP if media-screen < 480px { query_posts('posts_PEr_page=5'); } ?> <?PHP while (have_posts()) : the_post(); ?>

有什么建议?你能以某种方式将css / javascript布尔值传递给PHP脚本吗?

编辑:我宁愿不将访问者重定向移动网站,因为这已经超出了我的联盟.

解决方法

我不是这个解决方案的粉丝,但您可以简单添加一个元素,其中包含您希望在移动设备上显示的帖子数量,认情况下是隐藏的,仅在满足媒体查询条件时显示.

想象一下以下htML包含您的移动帖子

@H_301_13@<div class="is-mobile"> <div class="im-a-post">some content</div> <div class="im-a-post">some content</div> <div class="im-a-post">some content</div> <div class="im-a-post">some content</div> <div class="im-a-post">some content</div> </div> <div class="is-default> <div class="im-a-post">some content</div> <div class="im-a-post">some content</div> <div class="im-a-post">some content</div> <div class="im-a-post">some content</div> <div class="im-a-post">some content</div> <div class="im-a-post">some content</div> <div class="im-a-post">some content</div> <div class="im-a-post">some content</div> <div class="im-a-post">some content</div> <div class="im-a-post">some content</div> </div>

通过简单的媒体查询切换包装元素的可见性:

@H_301_13@.is-mobile { display: none; } @media (max-width: 480px) { .is-default { display: none; } .is-mobile { display: block; } }

更复杂(并且更好)的方法是通过javascript / PHP或者甚至CSS3:nth-​​child()选择器来注释要隐藏的元素(通过添加类).想象一下以下的javascript循环

@H_301_13@// assuming jquery $(".posts").each(function(idx,ele) { if (idx >= 5) { $(ele).addClass("hidden-mobile"); } });

用这个CSS

@H_301_13@@media (max-width: 480px) { .hidden-mobile { display: none; } }

这些将隐藏视口匹配的设备上除前五个帖子之外的所有帖子.但是你必须考虑适当的分页.

脚本宝典总结

以上是脚本宝典为你收集整理的具有屏幕宽度条件的PHP全部内容,希望文章能够帮你解决具有屏幕宽度条件的PHP所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。