1485 sujets

Web Mobile et responsive web design

Probleme de touchstart

Bonjour
J'ai créé mon site full responsive a partir d'un template qui utilise boostrap.
Etant donné que je ne suis pas développeuse, j'ai utilisé lightgalery pour faire mes galeries de portfolio.
j'ai réussi a tout adapté a mon gout et tout marche très bien selon moi sur ordinateur, ou alors les erreurs sont invisibles a mon oeil!.
Par contre sur mobile (android) lorsque je tape sur les icones de mon portfolio, l'icone diminue en opacité (ce que je demande en "hover") mais le slider ne se lance pas. J'ai constaté qu'en supprimant l'appel de boostrap.js, le slider se lance mais mon site n'est plus responsive...!
Quelle est la solution? y a-t-il un code qui peut perturber uniquement sur mobile?
le plus étonnant est que quand je coche la case "version ordinateur" sur mon android, tout marche !
help Smiley bawling
Bonjour pokasand,

Votre page http://www.sandrinemarchand.com/index-scie.html cumule quelques erreurs JS :

1 - vous chargez deux librairies jQuery ( http://www.sandrinemarchand.com/js/jquery.js et http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js )
==> vous pouvez garder uniquement la dernière librairie.

2 - Le fichier http://www.sandrinemarchand.com/js/bootstrap.js semble avoir été modifié. Le code suivant ne fait pas parti (sauf erreur de ma part) de Bootstrap 2.2.0 :
$(function(){
    // IPad/IPhone
    var viewportmeta = document.querySelector && document.querySelector('meta[name="viewport"]'),
    ua = navigator.userAgent,
 
    gestureStart = function () {
        viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
    },
 
    scaleFix = function () {
        if (viewportmeta && /iPhone|iPad/.test(ua) && !/Opera Mini/.test(ua)) {
            viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
            document.addEventListener("gesturestart", gestureStart, false);
        }
    };
    scaleFix();

    // Menu Android
    var userag = navigator.userAgent.toLowerCase();
    var isAndroid = userag.indexOf("android") > -1; 
    if(isAndroid) {
        $('.sf-menu').responsiveMenu({ /*  Cette ligne crée une erreur JS : responsiveMenu n'existe pas */
            autoArrows:true
        });
    }
    
});

/* ------ fix fixed position for Android -----*/
var ua=navigator.userAgent.toLocaleLowerCase(),
regV = /ipod|ipad|iphone/gi,
result = ua.match(regV),
userScale="";
if(!result){
    userScale=",user-scalable=0"
}
document.write('<meta name="viewport" content="width=device-width,initial-scale=1.0'+userScale+'">')
/*--------------*/
... et c'est précisément $('.sf-menu').responsiveMenu() (qui doit se déclencher uniquement sur les appareils Android) qui crée l'erreur : cette fonction JS n’existe pas.

Il y a bien un menu de classe .sf-menu dans la page (cette classe n'existe pas par défaut dans le fichier http://www.sandrinemarchand.com/css/bootstrap.css).

Avez-vous des informations sur ces lignes de code JS ? Avez-vous vraiment besoin de ce plugin "responsiveMenu" ?
==> Sans cette ligne, le carrousel fonctionne sur mobile Android (test fait sur Android KitKat 4.4), et ne m'a pas crée d'autre erreur.

Il reste encore quelques points flous sur votre projet, comme par exemple :
- Pourquoi cette gestion dynamique JS de la meta viewport ? (il y a un excellent article à ce sujet sur Alsacréations http://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html)
- Pourquoi ce http://www.sandrinemarchand.com/js/jquery.preloader.js pour les pages de plus de 1024px de large ?

... mais ceci est encore une autre histoire Smiley ravi

En l'attente de vos tests. Bon code Smiley biggrin ...
ca marche !
Y a pas a dire un pro sait ou chercher. Smiley lol
Pour les questions de preloader et viewport, joker !
Je suis une bidouilleuse un peu touche a tout et là c'est trop obscure pour moi.
Etant donné que j'ai utilisé un template tout fait, il y a certaines zones qui sont restées obscures pour moi même si au fur et a mesure de mes essais/erreurs, j'ai fini par comprendre pas mal de choses.
merci!
Et merci beaucoup pour votre aide.
j'essayerai d'approfondir vos questions pendant mon temps libre.
Sujet clos
Aller à