1448 sujets

Web Mobile et responsive web design

Bonjour à tous,

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

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 Smiley decu

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 Smiley smile

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 Smiley decu

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 Smiley smile


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 Smiley langue
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.
Du php... du javascript... mon Dieu...

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


Un exemple en ligne : CodePen
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 */