1477 sujets

Web Mobile et responsive web design

[Résolu] CSS mobile / contenu déborde

Bonjour à tous !
j'ai une web-app que j'aimerais pouvoir utiliser sur mobile (en attendant d'apprendre le dév android pour en faire une app native) mais j'ai quelques soucis au niveau du rendu.

Le contenu "déborde" légèrement sur le côté droit (tant en mode portrait que paysage) ce qui est gênant car ça oblige à "déplacer" pour voir le bord droit (j'ai déplacé mes boutons, liens etc à gauche pour ne pas être trop gênée mais bon)

J'ai ajouté récemment un agenda, qui est un tableau de 7 colonnes (1 par jour de la semaine, incroyable non ? ^^) et qui, lui, déborde largement : en portrait, je ne vois que 3 colonnes (de lundi à mercredi) ; en paysage, je vois presque tout (il me manque 3/4 de la colonne dimanche)

Je sais bien qu'un tableau ne peut pas être "coupé" pour passer à la ligne mais j'aimerais que, de base, l'intégralité soit affichée dans le fenêtre, quitte à devoir zoomer pour lire

le site : https://stick-it.phpblocnote.net
mon menu est fixé pour rester toujours accessible (mon contenu est parfois très long)
je ne peux pas vous montrer l'agenda puisqu'il faut être identifié

à noter : appli perso, ça doit fonctionner sur firefox (desktop et mobile), le reste je m'en fiche donc je peux utiliser des syntaxes non standard ou non reconnues par IE (par ex)

mon smartphone est un honor 10 (écran 19:9, résolution 1080 x 2280) si ça a un impact
ma css est reprise (partiellement d'un autre site), il y a donc peut-être des choses qui ne servent à rien

merci d'avance si quelqu'un a une idée !
Modérateur
Bonjour,

pour le débordement évite les width ce sera plus simple:

pour les éléments fixés:

#truc {
  position: fixed;
  left: 10px;
  right: 10px;
}


Pour les autres, les éléments en display block vont naturellement prendre la place disponible, sans dépasser.

Pour le tableau sans voir un exemple difficile de t'aider Smiley decu
Meilleure solution
OK pour la largeur j'ai enlevé le width
EDIT : comme il y avait déjà des margins, ça rentre tout bien, c'est déjà tellement mieux Smiley smile

pour le tableau, le contenu est dynamique donc ça ne sera jamais représentatif à 100%
il n'existe pas des propriétés qui permettraient de définir largeur du tableau = largeur de la surface affichée (dépend donc de l'orientation de l'écran) ?
je pensais que c'était le but des media queries mais j'ai peut-être pas tout saisi ^^

d'ailleurs quelle est la meilleure largeur pour cibler les mobiles ?
j'ai @media (max-width:1440px) et @media (max-width: 640px) dans la même css, pas sûre que ce soit bien efficace
j'ai l'impression que ma css mobile ciblée par handled n'est pas prise en compte en fait
Modifié par Elianora la blanche (31 Aug 2018 - 19:28)
Il y a les medias queries qui se règlent en fonction de l'orientation @media screen and orientation portrait ou landscape et pour largeur tableau = surface affiché, tu veux dire, largeur de l'écran ? Si oui, il y a l'unité vw pour la largeur et vh pour la hauteur.
Soldat8889 a écrit :
Il y a les medias queries qui se règlent en fonction de l'orientation @media screen and orientation portrait ou landscape et pour largeur tableau = surface affiché, tu veux dire, largeur de l'écran ? Si oui, il y a l'unité vw pour la largeur et vh pour la hauteur.


largeur de l'écran à condition qu'elle corresponde à largeur affichée oui
j'ai lu cet article : https://www.alsacreations.com/article/lire/1490-Comprendre-le-Viewport-dans-le-Web-mobile.html et ça n'a pas l'air aussi évident ^^

je vais tenter vw, je suppose que largeur = 1vw
bon, j'ai essayé de mettre mon tableau une largeur de 100vw mais ça déborde toujours.
J'ai essayé sur un tableau vide et c'est pas tout à fait OK mais de toute façon, il y aura toujours du contenu alors tant pis.
Tu devrais prévoir des images de fond de différentes tailles et choisir le bon fichier avec un media-query
Afficher une image de fond de 1920x1060px pesant 494Ko sur un smartphone, c'est consommer de la bande passante pour pas grand chose.
Plutôt que mettre l'image de fond sur <body>, je la mettrai sur <html> pour être sûr de couvrir tout l'écran et virer ce min-height:1000px qui met le souk sur un smartphone.
Pour connaitre les différentes tailles d'écran pointe sur http://mydevice.io
Taille Poids Device
1920x1060 506K
670x380 82K Iphone 6/7/8
1030x780 239K Ipad
1370x1024 376K Ipad pro

On vous le dira jamais assez je crois : MOBILE FIRST !

Je t'ai fait quelques modifs mais pour faire les choses correctement il faut repartir de zéro en commençant par l'affichage sur smartphone :
https://kazimentou.fr/divers/alsacreations/elianora-la-blanche/
Tu abuses des 'position: fixed' : mauvaise pratique pour le responsive design.
merci de t'être penché sur mon cas Smiley biggrin
mais comme je disais, ce site est à usage perso exclusivement, je m'en sers la plupart du temps sur ordi, j'ai juste besoin de pouvoir y accéder en mobilité au cas où donc :
- pas mobile first (du tout ^^)
- pas grave si le bg pèse une tonne (par contre, je ne le vois presque pas je vais donc l'enlever ^^)

par contre, le site est bien pratique, on découvre des trucs curieux

faut que j'api-se tout ça pour avoir mon agenda sur Android
Modifié par Elianora la blanche (03 Sep 2018 - 16:52)
Si c'est pour gérer un agenda sur son PC et le synchroniser sur Android au cas où, autant faire avec l'existant. Au moins c'est testé et approuvé par un grand nombre de personnes.
Pour info il existe un protocole caldav pour dialoguer avec un agenda . La même chose existe pour les carnets d'adresses: carddav.
Si tu veux installer un tel site, prends ton moteur de recherche favori et cherche "php caldav" et php carddav" sinon tu peux utiliser un compte Google (bof) ou framagenda https://framagenda.org/index.php/login
Pour Android, aller sur le dépôt F-droid et rechercher caldav et prendre davdroid
https://staging.f-droid.org/search?q=caldav&lang=fr

J'utilise Baikal sur un Odroid C1, derrière un serveur NGinx :
http://sabre.io/baikal/
http://blog.idleman.fr/installez-votre-synchronisateurs-de-contacts-chez-vous-avec-baikal/
https://www.hardkernel.com/main/products/prdt_info.php?g_code=G143703355573&tab_idx=1
l'idée n'était pas d'installer un quelconque site mais bien de remplacer gcalendar ^^
donc je vais zieuter du côté de framagenda (que n'y ai-je pensé ?)
merchi !
Apparement on doit pouvoir faire la même chose chez Free.fr vu qu'il parle de délégation iCal avec protocole caldav dans leur interface Zimbra pour les mails.

Pour dormir moins bête ce soir, à lire :
https://fr.wikipedia.org/wiki/CalDAV

Le must est quand même de l'héberger chez soi sur un petit ordinateur comme celui-ci :
https://www.aliexpress.com/store/product/Orange-Pi-PC-Plus-SET5-Orange-Pi-PC-Plus-Transparent-ABS-Case-Power-Supply-Over-Raspberry/1553371_32669760149.html?spm=2114.12010612.8148356.4.2b6a7323mMWWcI
Si vous n'avez pas trop l'esprit formatté par M$, ce n'est pas très compliqué avec une distribution Linux comme Armbian.
Vous pouvez sauvegarder vos calendriers et vos contacts.
Mais bien sûr, les smartphones ne sont jamais volés parce que c'est pas bien et qu'ils ne tombent jamais en panne Smiley biggrin
Modifié par bazooka07 (04 Sep 2018 - 10:21)
Sujet clos
Aller à