Désactiver une div selon largeur écran

[kerlin]

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

[doekia]

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

[kerlin]

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