PHP avec la Largeur de l'Écran condition

J'essaie de limiter mes posts sur WordPress si la largeur de l'écran est inférieure à 480px (appareil mobile, responsive).

Cependant j'ai couru dans un problème que j'ai su vous ne pouvez pas utiliser le PHP pour détecter la largeur de l'écran, j'ai besoin parce que je suis en utilisant PHP pour ajuster le post des nombres. Je m'attendais à quelque chose comme:

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

Des suggestions? Pouvez-vous en quelque sorte passer un css/javascript booléenne dans le script php?

EDIT: je préfère ne pas rediriger les visiteurs d'un site mobile, comme c'est hors de ma ligue.

Vous pouvez le faire avec AJAX. Pas avec PHP ou CSS.
Pour faire de la largeur de détection de PHP n'est pas une bonne idée. La meilleure façon est d'utiliser des requêtes de Média developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries ou JS stackoverflow.com/questions/5484578/...
bien sûr, il peut être fait avec les CSS. En fonction de la structure du DOM certains éléments pourraient simplement être caché par la mise en display: none; basé sur certains réactifs condition.
Le serveur n'a pas de soins ni de soins) sur la fenêtre d'affichage de l'utilisateur final/client. Il existe d'autres, plus adaptés technologies et langages de programmation qui font un bien meilleur travail à faire de votre INTERFACE utilisateur réactive (JavaScript, CSS, HTML5, ...), utilisez-les.
Le problème est que je ne peux pas utiliser javascript/css pour alterner les postes.

OriginalL'auteur Ming | 2013-12-31

4

Je ne suis pas fan de cette solution, mais vous pouvez simplement ajouter un élément avec le nombre de messages que vous souhaitez afficher sur mobile, qui est caché par défaut et ne s'affiche que lorsque le media-query condition est remplie.

Imaginez le code html suivant contenant votre mobile les postes
```
<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>
```
L'aide d'une simple requête de média que vous basculer l'visibiliy de votre enveloppe éléments:
```
.is-mobile {
    display: none;
}
@media (max-width: 480px) {
    .is-default {
        display: none;
    }
    .is-mobile {
        display: block;
    }
}
```
Un plus sophistiqués (et à mon humble avis une meilleure approche serait de soit annoter les éléments que vous souhaitez masquer (par ajout d'une classe) via javascript/php ou même CSS3 :nth-child() sélecteurs. Imaginez le code javascript suivant de la boucle
```
//assuming jQuery
$(".posts").each(function(idx, ele) {
    if (idx >= 5) {
        $(ele).addClass("hidden-mobile");
    }
});
```
avec ce CSS
```
@media (max-width: 480px) {
    .hidden-mobile {
        display: none;
    }
}
```
Ensemble ceux qui voudraient cacher tous, mais les cinq premiers postes sur un appareil à un endroit où la fenêtre d'affichage correspond. Mais alors vous avez à prendre la pagination correctement en compte.

Honnêtement pensé qu'il y aurait une meilleure approche. Je suppose que c'est pourquoi il vous suffit de rediriger tous les utilisateurs de mobiles. Cela a à faire pour le moment, merci
Vous n'avez pas de redirection de nos jours de plus, RWD ftw! 😉 C'est en fait la apporach décrites dans la solution, il suffit de plus en plus sophistiqués. On pourrait par exemple créer un mannequin de la pagination qui permet de contrôler la visibilité de la téléphonie mobile éléments cachés dans les blocs. Ou, beaucoup mieux aujourd'hui, au moins si vous pensez "mobile-first" termes, vous n'avez le mobile de postes dans les DOM et ensuite de charger les autres de manière asynchrone si ce n'est pas un appareil mobile.

OriginalL'auteur nietonfir
3

Je pense que vous pouvez bénéficier de l'aide de 51Degrees solution PHP. Il s'agit essentiellement d'un détecteur de périphérique qui utilise la chaîne de l'Agent Utilisateur, afin de correspondre à l'appareil contre les périphériques de fichier de base de données. Il est disponible comme un Plugin WordPress et peut être configuré via le panneau d'admin.

Vous pouvez utiliser ce plugin pour définir une règle qui fournit un thème différent pour les appareils avec le souhaité la taille de l'écran. Vous pouvez configurer autant de règles que vous le souhaitez avec de nombreuses combinaisons différentes. Avec l'appareil de base info vous avez plus de 50 propriétés du périphérique:

De cette façon, vous pouvez fournir un autre thème qui se montrent moins de postes pour les appareils mobiles sans avoir à faire tout codage (vous pouvez fournir un tout autre thème ou copie de votre thème actuel, mais le nombre de changement de postes à 5). Dans le cas où vous ne voulez pas ajouter des plugins à votre WordPress, vous pouvez ajouter des mêmes fonctionnalités en téléchargeant le détecteur de sourceforge et en ajoutant les lignes de code suivantes à votre thème:
```
<?php
//Add device detector to project.
require_once 'path/to/core/51Degrees.php';
require_once 'path/to/core/51Degrees_usage.php';

//Use information about device.
if ($_51d['ScreenPixelsWidth'] == 400)
{
     query_posts('posts_per_page=5');
}
?>
```
Espère que cette aide.

OriginalL'auteur Mike

Vous devez vous connecter pour publier un commentaire.