Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

Rendre une page compatible tél mobile ?

41 réponses
Avatar
Une Bévue
Bonjour et meilleurs vœux à toutes et à tous !

Je cherche des tutos pour rendre une page compatible avec un tél mobile.

En espérant que je n'aurai pas à toucher au js mais seulement aux css.

actuellement ma page est ainsi faite :

+----------------------------------------------------------------------+
| Header |
+----------------------------------------------------------------------+
| Catégorie 1 | Item 1 | |
| Catégorie 2 | Item 2 | |
| Catégorie 3 | Item 3 | |
| ... | ... | Item sélectionné ligne 1 |
| Catégorie n | Item j | Item sélectionné ligne 1 |
| Catégorie m | Item k | Item sélectionné ligne 1 |
| Catégorie l | Item l | Item sélectionné ... |
| | | |
+----------------------------------------------------------------------+
| Footer | | |
+----------------------------------------------------------------------+

quand on sélectionne une catégorie, on affiche les items correspondants,
quand un item est sélectionné, sont contenu est affiché
à droite.

ce que j'imagine, c'est qu'avec un mobile, j'ai trois pages au lieu d'une :
catégories ;
items ;
item

10 réponses

1 2 3 4 5
Avatar
Une Bévue
Le 25/01/2015 21:46, Eric Demeester a écrit :
Je ne sais pas ci cela a déjà été mentionné dans la discussions, mais
lorsque je développe des sites, j'use et abuse de deux modules
additionnels de Firefox, Web Developer et Firebug :



je regarderai mais je ne crois pas que je puisse utiliser Firefox, pour
deux raisons :
- en JS j'utilise Object.observe pour mettre à jour le html (quand un
objet est modifié, une action modifie le html accordingly) ;
- en html j'utilise <dialog /> pour l'entrée des données, de cette
manière les données sont validées directement par le navigateur.
Avatar
docanski
Une Bévue a écrit le 07/01/2015 08:21 :
Le 06/01/15 20:22, Denis Beauregard a écrit :
Ensuite, je suis habitué à Windows et à un navigateur complet.
Quand j'utilise une tablette (comme Safari sur iPad), certains sites
ont une version pour mobile (appelée smartphone dans certains cas)
et je suis souvent dans le chaos car cette version n'a pas toujours
telle fonction que j'utilise sur Seamonkey ou Firefox. En d'autres
mots, si le site est le moindrement sophistiqué, l'usager pourrait
apprécier de tomber dans le mode qu'il préfère, au lieu du mode
imposé par le site. Ainsi, si on détecte un iphone comme on détecte
un ipad, le premier étant étroit et pas l'autre, en se fiant à
un mauvais critère (si safari est utilisé par exemple), on invite
presque le client à aller voir ailleurs (s'il a le choix). Donc, il
faut toujours laisser au client la possibilité de changer de mode
et ne pas trop automatiser ce choix.



ok, merci, mais c'est quoi le "mode" ???



Le plus simple et ergonomique est de créer des pages dans un format
n'excédant pas 800 pixels de largeur. Il faut donc que tout "entre dedans".
Dans ce cas, tous les supports (ou presque : il est de plus en plus rare
de voir des ordiphones ayant une résolution inférieure à 800 px) sont
capables d'afficher de manière lisible.
Le petit site pour lequel j'ai posé une question "rollover déporté"
ci-dessus part de ce principe. Essayé sur différents ordiphones et
tablettes, ça roule.

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
SAM
Le 26/01/15 10:08, Une Bévue a écrit :
<dialog />




il paraitrait que :
l'élément dialog a été supprimé de la spécification HTML5 (en mars 2010)




Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 26/01/15 10:45, docanski a écrit :
Une Bévue a écrit le 07/01/2015 08:21 :

ok, merci, mais c'est quoi le "mode" ???



Le plus simple et ergonomique est de créer des pages dans un format
n'excédant pas 800 pixels de largeur.



heu ... probable que sur une tablette (≥ 7") ça roule mais ... non, de
limiter à 800px ne suffit pas sur un smartphone non géant
Capture sur mon iPhone :
http://cjoint.com/?EAAlR7k65ls
et avec un peu de bonne volonté (on met "plein écran" et horizontal)
http://cjoint.com/?EAAlVf36xFq
non ... on ne peut dire que c'est "lisible" !!!!

Même si un phone un peu moderne peut afficher tout un tas de pixels
époustouflants ils sont malheureusement entassés sur une toute petite
surface. De tester à la résolution du phone sur un écran d'ordi est on
ne peut plus trompeur !
Si la page est réglée en *fixe* (px par exemple) au lieu d'être
*élastique* ça va pas le faire !!!

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
docanski
SAM a écrit le 26/01/2015 11:53 :

Même si un phone un peu moderne peut afficher tout un tas de pixels
époustouflants ils sont malheureusement entassés sur une toute petite
surface.



Ce n'est pas de ma faute si les addictés au phone veulent toujours plus
de pixels.
C'est comme les addictés à la tablette de jeu : qu'ils assument leur
choix, sachant (ou ne sachant probablement pas) que le jour où ils
devront utiliser des lunettes, ce sera à cause de ce choix. Exactement
comme ceux qui écoutent la musikdelamorkitue à plus de 100 décibels et
qui sont à moitié sourds à l'âge de 25 ou 30 ans ...

De tester à la résolution du phone sur un écran d'ordi est on
ne peut plus trompeur !



Non, non ! testé sur plusieurs ordiphones sous Androïd. Là, ça baigne.
Sauf pour, la dernière page dont tu donnes le lien, il y a un problème :
le "onmouseover" ne marche pas.


Si la page est réglée en *fixe* (px par exemple) au lieu d'être
*élastique* ça va pas le faire !!!



L'utilisateur peut toujours utiliser le zoom, non !?

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
Sergio
Le 26/01/2015 12:33, docanski a écrit :
SAM a écrit le 26/01/2015 11:53 :

Même si un phone un peu moderne peut afficher tout un tas de pixels
époustouflants ils sont malheureusement entassés sur une toute petite
surface.





Jamais compris la raison (sinon marketing) d'ailleurs. La résolution "standard" d'un écran d'ordi est de 96dpi, d'une page imprimée
300dpi, voire 600dpi. AMHA, 200dpi, c'est largement suffisant.

C'est comme les addictés à la tablette de jeu : qu'ils assument leur choix, sachant (ou ne sachant probablement pas) que le jour où
ils devront utiliser des lunettes, ce sera à cause de ce choix. Exactement comme ceux qui écoutent la musikdelamorkitue à plus de
100 décibels et qui sont à moitié sourds à l'âge de 25 ou 30 ans ...



Je proteste ! Dans ma jeunesse (années 1960-70) les concerts de rock c'était quelque chose : je me rappelle un concert de Deep
Purple où pendant une semaine, j'avais les oreilles qui bourdonnaient... L'adage "il faut écouter le rock fort" n'était pas vain !

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Avatar
Une Bévue
Le 26/01/15 11:23, SAM a écrit :
il paraitrait que :
l'élément dialog a été supprimé de la spécification HTML5 (en mars 2010)



Ah zut, je l'ai découvert tardivement alors, il y a 1/2 mois...

MAIS :
A Preview of The New Dialog Element (September 25, 2013)
<http://blog.teamtreehouse.com/a-preview-of-the-new-dialog-element>

et aussi :
Native Modal Windows in HTML5: Using the dialog Element (10 nov. 2014)
<http://demosthenes.info/blog/957/Native-Modal-Windows-in-HTML5-Using-the-dialog-Element>
As support for <dialog> grows, it makes sense to move to using this
native element over framework solutions.

bon...
Avatar
Une Bévue
Le 25/01/15 23:48, SAM a écrit :
Si tu veux vraiment qques outils de simulation :
Pour Opera :
https://dev.opera.com/articles/installing-opera-mini-on-your-computer/



c'est un jsp, amha, j'ai mais ne marche plus (?).

pour Android :
http://developer.android.com/tools/help/emulator.html



il faut le sdk android.

et autres ...
comme un truc ± pour iPhone qui m'a l'air pas nouveau nouveau
<http://people.apache.org/~pmuellr/weinre/docs/latest/>



mon mobile est un Galaxy Note II.
Avatar
Une Bévue
Le 26/01/2015 18:05, Une Bévue a écrit :
mon mobile est un Galaxy Note II.


non la Galaxy Note III Lite...
Avatar
SAM
Le 28/01/15 12:09, Une Bévue a écrit :
Le 26/01/2015 18:05, Une Bévue a écrit :
mon mobile est un Galaxy Note II.


non la Galaxy Note III Lite...




Et ???

Moi c'est un iPhone 3Gs - iOS 6.xx - abonnement à 2€
mon épouse un Galaxy je c pas koi (pas marqué) - Android 2.3 - abo à 5€

ma tablette: une 7,9" Lenovo A550 - Android 4.4 ou par là

mon netBook: un Packard Bell - 1Go de RAM - Windows 7 starter - ou Linux
Ubuntu personnalisé (Navigatrix) sur clé USB


Voili, voilou,
... pour les sondages ;-)

D'expérience, les brouteurs de mon phone et de ma tablette semblent un
peu se moquer de savoir si la CSS est fixe, ils affichent tout l'bazard
sur la largeur dont ils disposent (et dézooment donc pour que ça rentre
dans le nombre de pixels apparents)
Reste ensuite, si nécessaire, à zoomer et scroller comme un malade si on
veut y voir un peu. (sauf à ce qu'il y ait une css intelligente prévue
pour réorganiser l'affichage pour mobile)(ce qui n'est pas touj non plus
la panacée!)

Le netBook 10", c'est du Windows, on ne s'étonne donc pas que ça soit
cracra !
Galère pas possible avec les sites qui ont un bandeau important et dont
seul ce qu'il y a dessous est scrollable !!!
Entre les différentes barres, le header et pourquoi pas le footer ou/et
le tchat, on n'a plus droit qu'à qquelques lignes !!!
Alors que l'engin s'est pourtant longuement épuisé à charger une
foultitude de pubs !!!
Et qu'on ne me parle pas de F11, outre que les touches de fonction ne
sont fonctionnelles que sur option elle ne montrent qu'à peine leur nom,
alors la trouver la-bas sans avoir fait gueuler le netBook .. ! c'est
pas d'la tarte !

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
1 2 3 4 5