Jump to content
kerlin

Désactiver une div selon largeur écran

Recommended Posts

Bonjour, pour améliorer le score d'un site sur Pagespeed, j'ai modifié le code affichant le logo pour mettre directement un logo de dimension réduite afin de ne pas charger le grand logo sur de petits écrans. Mais dans la liste des images à optimiser, Pagespeed m'indique toujours le grand logo. Vérification faite avec l'inspecteur, la div contenant le header sur _desktop est toujours chargée, seul un css display none l'empêche de s'afficher. 

Ma question est : comment faire un if selon la largeur pour ne pas charger la div _desktop sur mobile ? Est-ce possible ?

 

Merci d'avance

Share this post


Link to post
Share on other sites

Tu ne peux pas connaitre la taille de l'écran depuis PHP

Tu mets ta div sans contenu, et via javascript, si, et seulement si la taille le permet, tu injectes l'img dans ta div

Share this post


Link to post
Share on other sites

Merci Doekia pour ta réponse rapide !

Je suppose que, de base, le logo pour mobile est injecté via javascript alors puisque dans header.tpl, le code d'origine est <div class="top-logo" id="_mobile_logo"></div>

Pour forcer l'affichage de mon logo réduit, j'ai supprimé l'id et ajouté entre les balises div le code du lien et de l'image. Il faudrait que je le fasse dans le fichier js mais lequel est-ce ?

Et inversément, le code de base pour le desktop est 

<div class="col-md-5 col-sm-3 hidden-md-down" id="_desktop_logo">
          <a href="{$urls.base_url}">
            <img class="logo img-responsive" src="{$shop.logo}" alt="{$shop.name}">
          </a>
        </div>

et là c'est donc le css qui le cache. Il faudrait en fait que cela soit géré aussi en js et ne laisser que la div.
En voyant le code dans le js concerné pour le mobile je suppose que je verrai comment faire pour desktop, le tout est de savoir de quel fichier il s'agit ...

 

merci

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More