web-dev-qa-db-fra.com

Quelle est la meilleure pratique pour détecter la largeur de l’écran côté serveur?

J'ai un module qui sort 1 élément par défaut, dans son fichier help.php, il y a quelque chose comme

$items = 1;
$db->setQuery($query, 0, $items)

Maintenant, je veux détecter si la largeur de l'écran des utilisateurs est inférieure à une certaine valeur. Si c'est le cas, obtenez un seul élément, sinon quatre éléments. Quelle est la meilleure pratique pour le faire?

Je peux simplement définir $ items sur 4 et utiliser javascript pour éliminer les 3 autres éléments, mais ce n'est pas une solution parfaite, car des données excessives seront téléchargées. Mes questions sont: 1) peut PHP seul détecter la largeur de l'écran du client? 2) Si non et que je dois utiliser javascript/ajax, je pense ajouter

<script>
    var w = screen.width;
    href = location.href;
    if (location.search){
       href = href + '&screenWidth=' + w;
    } else
    href = href + '?screenWidth=' + w;
</script>

à chaque page et utilisez $_GET['screenWidth] pour obtenir la valeur de la largeur de l’écran dans le fichier helper.php, s’agit-il d’une bonne pratique? Est-ce que ça va gâcher le tampon de sortie (s'il y en a)?

phpbrowser-detectionmobile-detection
2
shenkwen

PHP ne peut pas détecter la taille de l'écran, car il fonctionne sur le serveur. Je ne voudrais pas aussi utiliser ajax pour quelque chose comme ça.

Utilisez capacités de détection du navigateur de Joomla avec le JApplicationWebClient et ajustez votre php/requêtes pour différents appareils, pas particulier pour différentes tailles d'écran.

Exemple de code:

$client = JFactory::getApplication()->client;
$client->browser;
$client->mobile...

Quelques réflexions sur votre dernier commentaire:

Et je ne comprends pas pourquoi les gens ont tendance à détecter le type d'appareil plutôt que la largeur de l'écran. Dans la plupart des cas (je ne fais habituellement que la mise en page) que je rencontre, je me fiche de ce que les utilisateurs utilisent, mais seulement la largeur de l'écran ....

Ce n'est pas que ce n'est pas possible de le faire avec AJAX. Mais si vous tenez compte de votre préoccupation initiale concernant la sauvegarde de données excessives ... quel serait l’intérêt si, après chaque redimensionnement d’écran, même si vous lui accordiez un délai afin que le redimensionnement soit un peu mieux établi, vous auriez une nouvelle demande de téléchargement des données (même si cela se produit en arrière-plan et même si vous les récupérez dans le cache). Vous vous retrouveriez au moins avec la même quantité de données. Alors pourquoi ne pas le faire depuis le début côté client avec CSS?

Une autre chose est que, après un changement de taille d'écran (par exemple, l'utilisateur bascule son appareil mobile de portrait en paysage), le rechargement des données peut apporter des éléments différents en cas de modification de la base de données. L'utilisateur pourrait être dérouté et devrait rechercher l'élément qu'il avait précédemment affiché sur son écran.

Bien sûr, il pourrait être possible d’indiquer le cas et de spécifier les cas dans lesquels une nouvelle demande de données devrait survenir ... Mais pourquoi tout cela est-il compliqué?

4
FFrewin

Si c'était moi, j'aborderais la question autrement.

j'aurais toujours 4 objets:

$items = 1;
$db->setQuery($query, 0, $items);
$rows = $db->loadObjectList();

les afficher tous:

foreach ($rows as $row)
{
    echo '<div class="item_"' . $row->id . '>' . $row->item . '</div>';
}

Quel serait le résultat:

<div class="item_1">
    // row data
</div>
<div class="item_2">
    // row data
</div>
<div class="item_3">
    // row data
</div>
<div class="item_4">
    // row data
</div>

tilisez ensuite les requêtes de média CSS3 pour en masquer 3:

@media (max-width: 767px) {
    .item_2, 
    .item_3,
    .item_4 {
        display: none;
    }
}

La façon dont j'ai affiché les données est purement un exemple et un concept.

J'ai toujours préféré utiliser le côté client pour détecter les largeurs d'écran (comme il se doit), et c'est aussi une meilleure performance.

J'espère que cela t'aides

1
Lodder

Meilleur entrainement? La meilleure pratique consiste à ne pas essayer de déterminer la taille de l'écran , car au final, c'est futile. Que se passera-t-il lorsqu'un utilisateur grand écran modifiera la taille de la fenêtre de son navigateur, par exemple?

Si vous souhaitez modifier une mise en page en fonction de la taille de l'écran sur le périphérique d'un utilisateur, faites-la avec une conception Web réactive.

Si vous craignez que le nombre d'éléments de contenu que vous fournissez par défaut ne convienne pas pour les appareils mobiles, réduisez vos valeurs par défaut et supposez toujours que mobile est en premier lieu. le développement mobile-first aborde spécifiquement des problèmes comme celui-ci.

Si vous souhaitez ensuite donner plus d’éléments de contenu aux utilisateurs d’écran large, vous devez consulter chargement conditionnel réactif techniques pour extraire les éléments supplémentaires de "taille du bureau".

1
Seth Warburton