Bonjour,

Pour la première fois je développe un site qui se veut "responsive". J'ai donc conçu le site pour qu'il soit ergonomique et intuitif autant sur ordinateur que sur smartphone et tablette. Mais comme toute première fois la transition entre les types d'appareils ne s’effectue pas aussi bien que je le souhaiterais .

Environnement de travail : JQuery, NodeJS, MySQL, navigateur Firefox.

Actuellement, le site fonctionne correctement sur ordinateur. Quand j'ouvre ma console (F12) et qu'utilise la vue adaptative (Ctrl+Shite+M) le site s'adapte comme il est prévu aux différents écrans. Malheureusement, quand j'essaye de faire une test réel avec mon vieux Iphone4 (encore sous OS7), rien ne s'adapte. De plus, les events "click" ne marchent pas.

Ci-dessous quelque bout de code pour vous faire une idée :

/* +++++++++++++++++++++++ MEDIA QUERY > 640px ++++++++++++++++++++ */
@media all and (max-width : 640px){
//instructions
}

if (window.matchMedia("(max-width : 640px)").matches) {
//insructions
}

<script type="text/javascript" src="/static/jquery/jquery-3.2.1.min.js"></script>

Pouvez-vous me dire ce qu'il en est ? J'avais compris que le but d'une application responsive était de n'avoir qu'à développer qu'un site et non pas deux.

-
Edité par renjusyeager 4 janvier 2018 à 11:40:55

Il faut savoir que ton Iphone a potentiellement un navigateur Safari ne supportant pas ces features.

De plus, pourquoi utiliser Js pour de l'apparence ?

Salut,

Quelle est la version du navigateur Safari sur ton vieil IPhone 4 ?

Je t'invite à vérifier sur https://caniuse.com si certaines propriétés CSS ne sont pas supportées par la version en question. 

Safari supporte très bien, et depuis très longtemps, matchMedia et les media queries.

Je conseille d'utiliser matchMedia le moins souvent possible pour manipuler le DOM. Ça peut faire émerger plein de problèmes auxquels on ne pense pas. C'est au niveau du design et du CSS que tu dois développer une stratégie pour te faciliter la tâche, comme par exemple utiliser flexbox (attention à la compatibilité). Bien-sûr, parfois ce n'est pas possible mais moins tu utilliseras Javascript et mieux tu te porteras, crois moi.

Pense à utiliser la balise meta suivante

<meta name="viewport" content="width=device-width, initial-scale=1">

Mais sans code, ou plutôt une page à visiter, c'est très difficile de te répondre.

@tabouretBleu : oui j'ai essayé d'éviter au maximum les matchMedia. J'ai été obligé dans mettre car je n'arrive pas à gérer mes cas autrement. Pour tout le reste je suis passé en media queries.

Waouh !!! J'ai inséré la balise meta et le css c'est adapté à l'écran . Je ne connaissais pas ce sympathique bout de code.

Par contre, mes event click ne marchent toujours pas. J'ai essayé de changer mes acutels event :

$('.cardG').click (function () {
//instructions
}

par :

$(document).on('click touch','.cardG',function () {}

//ou

$(document).on('click touchstart','.cardG',function () {}

//ou

$(document).on('click touchend','.cardG',function () {

mais rien n'y fait .

-
Edité par renjusyeager 4 janvier 2018 à 13:16:05

Je connais pas assez jQuery et sa délégation d'événement. Essaie de binder un événement simple. Aussi, j'ai jamais tenté de déléguer un événement sur document. Ça ne marche peut-être pas sur mobile.

L'événement click doit avoir lieu même si tu définis des événements touchstart/end. Il a lieu après l'événement toucheend. Du coup, je conseille soit d'utiliser click, soit d'utiliser touchend et mouseup

je test sur balise div qui utilse un mise en forme de semantic-ui

<div id="test" class="ui card blurring" style="width:100px;height:100px">
                </div>

J'ai essayé de binder mais ça ne fonctionne pas mieux.

$('#test').bind('touchstart click', function(e){
    $(this).css({'background-color':'red'})
})

Depuis deux jours je fouille le net à la recherche d'un indice, d'une réponse, mais rien... Je commence à désespérer .

Peut-être que je n'ai pas les bons add-on. Ci-dessous les scriptes que j’utilise.

<script type="text/javascript" src="/static/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="/static/js/client.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
    <script type="text/javascript" src="/static/semantic/semantic.min.js"></script>
    <script type="text/javascript" src="/static/semantic/semantic.js"></script>

Ci-dessous ce que j'ai dansle head :

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="/static/semantic/semantic.min.css">
    <link rel="stylesheet" href="/static/semantic/semantic.css">

-
Edité par renjusyeager 5 janvier 2018 à 12:07:53

Sans inspecter la page, avoir accès à la console ou voir le reste du code je ne peux rien faire.

Je n'est pas encore testé toutes les fonctionnalités du site, mais j'ai un peu avancé (histoire de se redonner un peu de moral ).

Dans les différents scripts que j'ai mis plus haut, je n'avais pas tout mis pour éviter un gros pavé indigeste. Dans les nombreux fichiers n'apparaissant pas il y a un :

<script type="text/javascript" src="/static/js/cards2.js"></script>

Ce fichier cards2.js contient une grande partie de mes fonctionnalités JQuery du site. J'ai entrepris dans tester chaque partie pour essayer de trouver les blocages éventuels. De cette recherche j'ai ressorti deux problèmes exposés ci-dessous :

Blocage 1 :

Le site contient un chat que je fais fonctionner à l'aide de socket-io. Mes sockets socket.emit et socket.on sont contenus dans plusieurs de mes fichiers .js dont une socket.emit dans le fichier cards2.js

//Send to server that a socket.room have to be created
            socket.emit('sendInfo', { fullProject, getPseudo, card });

En retirant cette ligne de code du mon fichier cards2.js le blocage est résolu . Je m'étonne cependant du problème car c'est peut-être la seule socket.emit à l’intérieur de mon fichier mais j'en ai d'autres dans plusieurs autres fichiers. Je ne suis pas encore allé plus loin dans ma recherche. Si certain ont des idées je suis preneur car il va bien falloir que mon chat fonctionne .

Blocage 2 :

Dans le fichier cards2.js j’ajoute à l'aide d'un .append() les lignes de code suivantes à mon DOM :

$('#displayP').append(
                        `
                        <div class="card blurring" data-fullProject="`+ value.ref + `">
                            <div class="content center aligned">
                                <div class="description">
                                    <div>Projet N° <b>`+ value.ref + `</b></div>
                                    <br>
                                    <br>

                                    <div class="titleAreaP">`+ value.title + `</div>

                                </div>
                            </div>
                        </div>
                        `

notez que les guillemets de début et de fin ainsi que ceux avant et après les + sont fait en appuyant sur Altgr+7(deux fois) ``. Ces guillemets posent visiblement probleme aux mobiles car une fois ce code transformé avec des guillemets de la touche 4 ' ', le blocage est résolu :

$('#displayP').append(
                        
                        '<div class="card blurring" data-fullProject="'+ value.ref + '">'+
                            '<div class="content center aligned">'+
                                '<div class="description">'+
                                    '<div>Projet N° <b>'+ value.ref + '</b></div>'+
                                    '<br>'+
                                    '<br>'+

                                    '<div class="titleAreaP">'+ value.title + '</div>'+

                                '</div>'+
                            '</div>'+
                        '</div>'

Comme pour le blocage 1, mon .append('xxxxx') est aussi contenu dans d'autres fichiers qui ne semblent pour l'instant pas bloquer le site. Il me faut bien sur creuser d'avantage le sujet.

Voila ou j'en suis à l'heure actuelle. Si ces problèmes vous parlez ou font écho à d'ancien souvenir je suis preneur .

-
Edité par renjusyeager 5 janvier 2018 à 15:27:52

Utilise un "compilateur" comme babelJS pour rendre ton code plus compatible C'est normal que ton guillemet ne fonctionne pas partout. C'est une syntaxe très récente.

Ta console d'erreurs aurait dû t'alerter de ça. Tu peux utiliser tes outils de développement sur mobile. Renseigne-toi sur le débogage mobile et la procédure à suivre avec ton navigateur. Il y a aussi des machines virtuelles pour déboguer d'autres appareils.

Après tout ce temps, j'ai réussi à résoudre le blocage 1 décrit plus haut. Maintenant, tout marche correctement .

Le blocage résidait dans l'écriture de mes socket.emit() qui n'étaient pas correctes .

Au lieu d'écrire :

//Send to server that a socket.room have to be created
 socket.emit('sendInfo', { fullProject, getPseudo, card });

il faut écrire :

//Send to server that a socket.room have to be created
 socket.emit('sendInfo', { fullProject : fullProject, getPseudo : getPseudo, card : card });

La première écriture s’exécute très bien sur le desktop, mais pas sur mobile ou tablette. Dans mon cas, il me faut utiliser la deuxième écriture pour que le script fonctionne sur tous les supports .

Conclusion :

En changeant tous les guillemets de type `` par des ' ' et en écrivant la bonne forme pour mes socket.emit() mon site fonctionne à merveille sur les tous les supports.

Comme je te le disais, c'est récent. Pareil pour la syntaxe de l'objet littéral. Tu peux écrire ton code avec une syntaxe moderne et le compiler vers une version plus ancienne du moteur pour la production et les tests sur mobile. C'est un peu chiant à mettre en place, mais si tu veux progresser en JS, il vaut mieux apprendre dès maintenant les nouvelles fonctionnalités, quitte à apprendre petit à petit, plutôt que d'attendre que ce soit supporté partout depuis 5 ans et prendre beaucoup de retard.