英文:
change the value of posts_per_page on mobile screen
问题
我有这段代码：
$args = array('post_type' => 'development', 'posts_per_page' => 1, 'order' => 'ASC');
$loop = new WP_Query($args);
while ($loop->have_posts()) : $loop->the_post();
?>
// 这里是HTML代码
<?php
endwhile;
?>
我想在移动屏幕上将 posts_per_page 的值更改为 (-1) 以获取所有文章。
我尝试使用 wp_is_mobile，但我认为它在平板电脑上返回 true，而我不希望如此。 有什么帮助吗？
英文:
I have this code:
$args = array('post_type' => 'development', 'posts_per_page' => 1, 'order' => 'ASC');
$loop = new wp_query($args);
while ($loop->have_posts()) : $loop->the_post();
?>
//html code here
<?php
endwhile;
?>
and I want to change the value of posts_per_page to (-1) on mobile screen to get all posts.
I tried to use
wp_is_mobile
but I think it returns true when it is a tablet and I don't want that. Any help?
答案1
得分: 0
wp_is_mobile检查$_SERVER['HTTP_USER_AGENT']，无法区分手机和平板电脑。
解决这个问题有几个选项：
1）使用库https://github.com/serbanghita/mobile-detect
$detect = new \Detection\MobileDetect;
$deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');
2）通过JavaScript检查设备，通过Ajax接收帖子（可能会影响SEO）：
if (window.matchMedia('(min-width:1024px)').matches) {
// desktop
}
if (window.matchMedia('(max-width:1023px) and (min-width:768px)').matches) {
// tablet
}
if (window.matchMedia('(max-width:767px)').matches) {
// mobile
}
3）以不同的块中显示相同的帖子（似乎是最差的选择），例如：
<div class="hidden-mobile">
<!-- 帖子 -->
</div>
<div class="visible-mobile">
<!-- 帖子 -->
</div>
@media (max-width: 767px) {
.hidden-mobile {
display: none;
}
}
@media (min-width: 768px) {
.visible-mobile {
display: none;
}
}
英文:
wp_is_mobile checks $_SERVER['HTTP_USER_AGENT'] and cannot distinguish between a phone and a tablet.
There are several options for solving the problem:
- Use the library https://github.com/serbanghita/mobile-detect
$detect = new \Detection\MobileDetect;
$deviceType = ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'phone') : 'computer');
- Receive posts via Ajax (may affect SEO) by checking the device via javascript:
if(window.matchMedia('(min-width:1024px)').matches){
// desktop
}
if(window.matchMedia('(max-width:1023px) and (min-width:768px)').matches){
// tablet
}
if(window.matchMedia('(max-width:767px)').matches){
// mobile
}
- Display the same posts in different blocks (seems the worst option), for example:
<div class="hidden-mobile">
<!-- posts -->
</div>
<div class="visible-mobile">
<!-- posts -->
</div>
@media (max-width: 767px) {
.hidden-mobile {
display: none;
}
}
@media (min-width: 768px) {
.visible-mobile {
display: none;
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论