web-dev-qa-db-fra.com

Meilleure approche pour charger une barre latérale Seulement si la largeur maximale de l'écran est> 900px?

Je me suis beaucoup amusé avec les requêtes des médias ces derniers temps et j'adore le concept. Il est si facile d'afficher des images ou de modifier les flottants de div en fonction de la largeur maximale de l'écran de l'utilisateur.

J'essaie de trouver un moyen d'afficher une barre latérale personnalisée sur mon modèle Uniquement si la taille de l'écran de l'utilisateur est suffisamment grande pour le permettre. c'est-à-dire que max-width est> 900px.

Jusqu'à présent, chaque solution que j'ai trouvée utilise simplement css pour masquer/afficher une div via la requête du média.

exemple:

@media screen and (max-width: 880px) {
#secondary-nav  {
    display: none;
}

Le "problème" avec cette approche est que j'envoie toujours les données à des périphériques qui ne peuvent pas les voir en raison de ma dissimulation. Crée une surcharge inutile pour les utilisateurs mobiles.

Ce que je recherche, c’est la meilleure approche pour charger la barre latérale uniquement si elle correspond à mes "règles". En outre, il doit se réajuster si le spectateur modifie la taille de la fenêtre du navigateur, comme lorsqu’il est accroché à un côté dans win7.

J'ai trouvé un concept d'utilisation de javascript pour vérifier la largeur de l'écran et l'enregistrer dans un cookie: http://www.yiibu.com/resources/scripts/default.js

J'imagine qu'à ce moment-là, il y aurait un moyen de vérifier les données de "largeur" ​​du cookie, puis de servir la barre latérale ou non.

Le seul problème est que se passe-t-il si les cookies ne sont pas activés?

de plus, que se passe-t-il lorsque la taille de l'écran change? Cela signifie-t-il que le cookie est en train d'être défini/désactivé plusieurs fois?

Quoi qu'il en soit, je suis vraiment ouvert aux idées sur celui-ci, car c'est un territoire vierge pour moi.

L'idée principale ici est de servir des modèles wp appropriés pour le périphérique sans envoyer de données au périphérique de l'utilisateur qui est masqué pour les écrans plus petits. Après tout, les données mobiles coûtent cher, alors je tiens à faire tout ce qui est en mon pouvoir pour aider mes utilisateurs.

jquerycsstemplatessidebar
1
shawn

Sur mon site Web, je charge les commentaires récents par AJAX pour les tailles de fenêtre supérieures à 480px:

if ( 480 < jQuery(window).width() )
{
    jQuery(document).ready(
        function()
        {
            jQuery.get('http://toscho.de/?rc', 
                function(data)
                {
                    jQuery(data).insertBefore('#inner');
                }
            );
        }
    );
    jQuery('#posts').after('<div class=clear>&#160;</div>');
}

Ce code est assez ancien et pas très élégant. Mais cela peut vous donner un indice pour la bonne direction…

2
fuxia

À ma connaissance, ce n’est pas une solution, c’est l’un des problèmes des requêtes de médias et des CSS. Je vois souvent des sites entiers utilisant simplement visibility:hidden; ou display:none;. Votre meilleur choix est simplement de créer une page séparée pour le mobile par rapport au bureau, ou d'utiliser des éléments qui peuvent être très fluides (non dynamiques). Je suis sûr que vous pouvez pirater quelque chose avec JavaScript et des cookies, mais le résultat final sera très probablement très problématique et aura du mal à se conformer.

Ceci est une lecture solide: http://www.alistapart.com/articles/responsive-web-design/

1
Wyck

Je pense que la façon la plus simple de le faire serait de regarder useragent au niveau du serveur et de servir un thème complet ou mobile en fonction de cela. Dans les thèmes, vous pouvez ensuite afficher/masquer des éléments en fonction de la largeur réelle de la fenêtre et être un peu plus économique à ce sujet.

1
Milo