[RESOLU]Afficher une bannière uniquement sur la version mobile du sit

Bonjour à tous,

Nouveau venu, j'espère ne pas enfreindre les règles du forum

Je suis assez débutant dans la création de site. Je souhaiterais ajouter une bannière, sous forme d'une image cliquable, uniquement sur la version mobile du site.

J'ai bien compris le fonctionnement des medias queries dans le CSS. Mais là, je pense que je dois inclure ce nouvel élément dans mon code PHP. Mais comment faire ? Je ne trouves pas de piste

Voici ce que j'aimerais faire :
http://www.lesdoigtsfleuris.com/ban-respon.jpg

Au cas où, voici mon site :

Je vous remercie d'avance pour votre aide précieuse

Grunjo
Modifié par grunjo (05 Jul 2015 - 10:31)

Je me dis que peut-être, je devrais coder un truc dans ce genre...

<?php if ( ! is_front_page() && is_media_query ) {?>

 <p>Les doigts Fleuris</p>

<?php }?>

Mais je me doute que l’attribut "is_media_query" est faux

Arf...

Hello ,

En javascript (voir jquery) tu peux gérer cela, il suffit de mettre ta bannière en display none, de détecter si le browser et un browser mobile, et de ce fait appliquer un diplay block sur la bannière
plusieurs méthode pour cela deja existante, a toi de tester:

window.mobileAndTabletcheck = function() {
  var check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
}

cette méthode inclue les tablettes

function detectmob() { 
 if( navigator.userAgent.match(/Android/i)
 || navigator.userAgent.match(/webOS/i)
 || navigator.userAgent.match(/iPhone/i)
 || navigator.userAgent.match(/iPad/i)
 || navigator.userAgent.match(/iPod/i)
 || navigator.userAgent.match(/BlackBerry/i)
 || navigator.userAgent.match(/Windows Phone/i)
 ){
    return true;
  }
 else {
    return false;
  }
}

Si c'est true..... display block

function detectmob() {
   if(window.innerWidth <= 800 && window.innerHeight <= 600) {
     return true;
   } else {
     return false;
   }
}

Ici on se base uniquement sur la résolution. une technique un peu flemmarde
Modifié par JENCAL (03 Jul 2015 - 11:15)

Oh merci !!!

Et tout se gère dans le fichier function.php ?

Dans le Header.php j'ai créé une DIV elle est en display none sur la version normale. En vain.

non non c'est pas du php, c'est du javascript

alors là je pêche complètement lol

Du php... du javascript... mon Dieu...

Essayez ceci :

@media (max-width: 600px) {
    .link {
        display: none;
    }
} /* END @media */

Un exemple en ligne : CodePen

Merci ! Ca marche nickel !

Bien sûr (pour les futurs lecteurs de ce topic) pour la version mobile il faut faire dans le sens inverse avec min-width :

@media (min-width: 600px) {

    .link {
        display: none;
    }

} /* END @media */