Logo GNT
Actualités Tests & Guides Bons Plans
GTA 6 iPhone 17 Copilot Switch 2 Temu ChatGPT Tesla
OVH Cloud OVH Cloud
Entraide Développement Développement Langage PHP Rendre une page compatible tél mobile ?

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
Signaler un problème avec ce contenu

10 réponses

Supprimer
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire

Veuillez sélectionner un problème

Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
1 2 3 4 5
Avatar
SAM
Le 07/01/15 09:16, Une Bévue a écrit :
Le 07/01/15 09:05, Une Bévue a écrit :
Et sinon, avec ces css correctives :



bon, j'essaie de comprendre...



je viens de comprendre un truc ;-)

toutes les catégories sont rendues non visibles exceptées celle
sélectionnées, idem pour les items, le résultat est super, il y a tout
sur une page.



Voilà ! Toutafé !

nav p.row { display: none; }
nav p.row.selected { display: block }

Il te reste à bricoler ton JS qui "sélectionne/déselectionne" les span
pour qu'à la place il le fasse sur les row


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 07/01/15 09:05, Une Bévue a écrit :
Le 06/01/15 18:23, SAM a écrit :
Et sinon, avec ces css correctives :



bon, j'essaie de comprendre...

nav p.row { display: none; }
nav p.row.selected { display:block }
nav p.row.selected span { margin-left: 15px; background-color:#ffc; }
nav { height: auto; }
nav#categories { bottom: auto; position: relative; width: 50%; float:
left}



euh, là le 'width: 50%;' c'est relatif à body non ?



c'est relatif au premier parent ou grand parent conteneur qui est
"positionné"
et body est par nature "positionné" (en relative)

Donc si c'est lui le 1er conteneur, alors oui c'est 50% de body

nav#items { bottom:auto; position: relative; width: 50%;left: 0;
float:left; }



là, avec 'position: relative;' ET 'left: 0;float:left;', ça veut dire
que 'nav#items' va se positionner contre 'nav#categories'.



peut-être que ce relative ne sert à rien (sauf à contrer ta css qui le
mat en absolute)

la flottaison à gauche des divers éléments va les positionner côte à
côte (horizontalement) tant qu'il y a de la place pour les afficher,
ceux en surnombre passent à la ligne
... modo-grosso

Le style float transforme l'élément en presque absolute
(l'élément voit sa largeur réglée par son contenu au lieu de prendre
toute la place disponible)


section#item { /* float: right; */ position: relative;left: 0; width:
100%; }



là le 'width: 100%;' signifie quoi ?, c'est 100 % de quoi, du body (dans
le cas d'un smartphone), si c'est ça ok.



c'est 100% du 1er conteneur qui est en positionné (en gal : relative)
à défaut c'est, oui en effet, 100% du body (qui est par nature en relative)

header div#header_left { width: auto; }





ça aussi c'est pour "corriger" les css que tu avais faites
en supprimant le width de ta css ça devrait faire pareil

bon, ce que je retiens surtout c'est 'position: relative; width: 50%;
float: left' beaucoup plus sioux que ce que j'ai fait.



float:left; width: 50%;
devrait suffire

on peut aussi essayer
display: inline-block; width: 50%;

le pb, pour moi, est que je ne maitrise pas le css, j'en fait une fois
tous les n années, et je rajoute, pour corriger, l'existant plutôt que
virer ce qu'il y a en trop...




Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Une Bévue
Le 07/01/15 23:31, SAM a écrit :
Voilà ! Toutafé !

nav p.row { display: none; }
nav p.row.selected { display: block }

Il te reste à bricoler ton JS qui "sélectionne/déselectionne" les span
pour qu'à la place il le fasse sur les row




oui, pas difficle à faire, encore merci !
Avatar
Une Bévue
Le 07/01/15 23:53, SAM a écrit :
euh, là le 'width: 50%;' c'est relatif à body non ?



c'est relatif au premier parent ou grand parent conteneur qui est
"positionné"
et body est par nature "positionné" (en relative)

Donc si c'est lui le 1er conteneur, alors oui c'est 50% de body

nav#items { bottom:auto; position: relative; width: 50%;left: 0;
float:left; }



là, avec 'position: relative;' ET 'left: 0;float:left;', ça veut dire
que 'nav#items' va se positionner contre 'nav#categories'.



peut-être que ce relative ne sert à rien (sauf à contrer ta css qui le
mat en absolute)

la flottaison à gauche des divers éléments va les positionner côte à
côte (horizontalement) tant qu'il y a de la place pour les afficher,
ceux en surnombre passent à la ligne
... modo-grosso

Le style float transforme l'élément en presque absolute
(l'élément voit sa largeur réglée par son contenu au lieu de prendre
toute la place disponible)


section#item { /* float: right; */ position: relative;left: 0; width:
100%; }



là le 'width: 100%;' signifie quoi ?, c'est 100 % de quoi, du body (dans
le cas d'un smartphone), si c'est ça ok.



c'est 100% du 1er conteneur qui est en positionné (en gal : relative)
à défaut c'est, oui en effet, 100% du body (qui est par nature en relative)

header div#header_left { width: auto; }





ça aussi c'est pour "corriger" les css que tu avais faites
en supprimant le width de ta css ça devrait faire pareil

bon, ce que je retiens surtout c'est 'position: relative; width: 50%;
float: left' beaucoup plus sioux que ce que j'ai fait.



float:left; width: 50%;
devrait suffire

on peut aussi essayer
display: inline-block; width: 50%;




ok, ok pigé.
Avatar
Une Bévue
Le 07/01/15 18:05, Denis Beauregard a écrit :
mobile ou pour tous les navigateurs



ok merci.
Avatar
Une Bévue
Le 02/01/15 11:42, Une Bévue a écrit :
Je cherche des tutos pour rendre une page compatible avec un tél mobile.



Bon je viens juste de remarquer que dans "Opera Beta 27.0", il y a un
outil qui peut aider :
<http://www.cjoint.com/15jv/EAzqzYNHHfl_15_01_25__16_12_44__opera_beta_27.0_devices_on_d620.png>

dans l'inspecteur il y a un onglets "Devices" permettant de simuler le
screen size du gsm ciblé.
Avatar
Eric Demeester
Bonsoir,

Une Bévue (Sun, 25 Jan 2015 16:18:40 +0100 -
fr.comp.infosystemes.www.auteurs) :

<http://www.cjoint.com/15jv/EAzqzYNHHfl_15_01_25__16_12_44__opera_beta_27.0_devices_on_d620.png>



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 :

Web Developer :
https://addons.mozilla.org/fr/firefox/addon/web-developer/

Firebug :
https://addons.mozilla.org/fr/firefox/addon/firebug/

dans l'inspecteur il y a un onglets "Devices" permettant de simuler le
screen size du gsm ciblé.



Dans Web Developer, menu « Fenêtre », de nombreux formats de
visualisation sont proposés, dont « Affichage smartphones » et « Voir
les modèles adaptatifs ».

Comme déjà dit, peut-être pas en ces termes mais c'est l'idée, pour
créer des sites compatibles avec différents terminaux, les principaux
mots-clé sont « responsive design » et « définition des blocs en
pourcentage ».
Avatar
SAM
Le 25/01/15 16:18, Une Bévue a écrit :
Le 02/01/15 11:42, Une Bévue a écrit :
Je cherche des tutos pour rendre une page compatible avec un tél mobile.





Si tu veux vraiment qques outils de simulation :
Pour Opera :
https://dev.opera.com/articles/installing-opera-mini-on-your-computer/
pour Android :
http://developer.android.com/tools/help/emulator.html
et autres ...
comme un truc +/- pour iPhone qui m'a l'air pas nouveau nouveau
<http://people.apache.org/~pmuellr/weinre/docs/latest/>

Sinon :
<http://expeert.com/fr/ios/blog/1595-balises-meta-pour-le-web-mobile>
et puis :
<https://html5boilerplate.com/>




Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 25/01/15 16:18, Une Bévue a écrit :

<http://www.cjoint.com/15jv/EAzqzYNHHfl_15_01_25__16_12_44__opera_beta_27.0_devices_on_d620.png>



Tien ?
Tu as bricolé qque chose aux css ? !
normalement le menu devrait passer *sous* l'entête-titre
Je vois qu'il passe *dessus* !


float: left;
float: left;
float: left;
float: left;

on ne le dira jamais assez !

afin que, s'il manque de place en largeur, le texte de la recette passe
sous l'image l'illustrant.


file donc l'idée à Marmiton !
pour ses pages web !
(son appli pour tablettes et phones elle est à chier tellement elle est
lourde à se lancer !)(en tous cas chez moi !)


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Une Bévue
Le 25/01/2015 23:56, SAM a écrit :
Tien ?
Tu as bricolé qque chose aux css ? !



non non pas encore, j'ai finalisé des scripts côté base de données.
je vais incorporer des modifs en début de semaine pour le CSS.

normalement le menu devrait passer *sous* l'entête-titre
Je vois qu'il passe *dessus* !


float: left;
float: left;
float: left;
float: left;

on ne le dira jamais assez !

afin que, s'il manque de place en largeur, le texte de la recette passe
sous l'image l'illustrant.



là c'est difficile, je regarderai si, pour marmiton, je peux ajouter ça.
mais bon, mes pages peuvent provenir d'une vingtaine de sources
différentes...

file donc l'idée à Marmiton !
pour ses pages web !



oh là, c'est une bouillie...
en fait, ce que je représente c'est une extraction des pages de
marmiton, par exemple, j'ai un script ruby qui fait ce qu'il peut pour
nettoyer le code des sites visités (suppression des pubs par ex) là
j'utilise ruby et son gem Nokogiri.

(son appli pour tablettes et phones elle est à chier tellement elle est
lourde à se lancer !)(en tous cas chez moi !)



jamais essayé...
1 2 3 4 5