Pour moi, petit est beau, donc j'utilise cette technique:
Dans le fichier CSS:
/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
#some-element { display: none; }
}
Dans le fichier jQuery / JavaScript:
$( document ).ready(function() {
var is_mobile = false;
if( $('#some-element').css('display')=='none') {
is_mobile = true;
}
// now I can use is_mobile to run javascript conditionally
if (is_mobile == true) {
//Conditional script here
}
});
Mon objectif était d'avoir mon site "mobile-friendly". J'utilise donc CSS Media Queries pour afficher / masquer les éléments en fonction de la taille de l'écran.
Par exemple, dans ma version mobile, je ne veux pas activer la Facebook Like Box, car elle charge toutes ces images de profil et tout ça. Et ce n'est pas bon pour les visiteurs mobiles. Donc, en plus de cacher l'élément conteneur, je le fais également à l'intérieur du bloc de code jQuery (ci-dessus):
if(!is_mobile) {
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
Vous pouvez le voir en action sur http://lisboaautentica.com
Je travaille toujours sur la version mobile, donc ça ne semble toujours pas comme il se doit, au moment d'écrire ceci.
Mise à jour par dekin88
Il existe une API JavaScript intégrée pour détecter les médias. Plutôt que d'utiliser la solution ci-dessus, utilisez simplement ce qui suit:
$(function() {
let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
if (isMobile) {
//Conditional script here
}
});
Prise en charge du navigateur: http://caniuse.com/#feat=matchmedia
L'avantage de cette méthode est qu'elle est non seulement plus simple et plus courte, mais vous pouvez cibler conditionnellement différents appareils tels que les smartphones et les tablettes séparément si nécessaire sans avoir à ajouter des éléments factices dans le DOM.