Image qui bouge en fonction du navigateur en HTML et CSS
Perehallal -
Bonjour,
Je suis entrain de coder un site en html et css qui marcherait sur un navigateur ordinateur et sur un navigateur de téléphone. J'ai coder mon site avec un visuel d'ordinateur puis quand je regarde mon site sur un téléphone certaine de mais image ce déplace du cadre du site.
Est ce que quelqu'un serait comment faire pour bloquer un image et quelle ne bouge pas en fonction du navigateur ou de l'appareille utiliser.
Merci pour votre réponse,
Timéo
- Image qui bouge en fonction du navigateur en HTML et CSS
- Fonction si et - Guide
- Image en 3d qui bouge - Télécharger - Thèmes & Fonds d'écran
- Navigateur web - Guide
- Navigateur privé - Guide
- Editeur html - Télécharger - HTML
1 réponse
On peut éventuellement avec la programmation JavaScript faire ce genre de choses mais ce n'est pas recommandé.
Il y a nettement mieux et c'est même mandataire dans la création des pages web: faire des pages dites adaptatives ce qui signifient qu'elles sont prévues pour s'afficher sur n'importe quel appareil.
Pour ça la base est de ne jamais indiquer des dimensions fixes pour utiliser des dimensions proportionnelles.
200px sur une page à une taille fixe tandis que 10% de la page sera toujours 10% quelque soit la taille de l'écran.
ça c'est la base(utiliser des dimensions proportionnelles, pour les textes des polices avec les unités proportionnelles comme "em" basé sur la hauteur de ligne plutôt que pt ou px).
Avec CSS il y a les mediaqueries qui permettent d'indiquer plusieurs règles différentes(et donc mises en pages) selon les dimensions de l'écran.
Gardez à l'esprit qu'il n'y a que vous qui avez l'écran que vous avez donc les tailles d'écran que vous voyez ne sont que pour vous. A moins que vous ne désigniez le site à n'être consulté que par vous TOUTES VOS DIMENSIONS SERONT FAUSSES.
Par défaut et par politique de Google un site doit être fait avant tout pour être affiché sur un mobile. En effet plus de la moitié des sites seront consultés sur des mobiles avec des écrans de résolutions et dimensions physiques plus petite qu'un ordinateur de bureau.
Les sites qui ne sont pas correctement accessibles sur un mobile seront moins bien référencé par Google. On peut le regretter mais l'idée d'Internet est bien de privilégier l'utilisateur. Les pages étant faite pour lui il faut donc que votre site s'adapte, au minimum en ayant prévu un affichage qui sera affiché 10 fois plus petit que sur un écran de grande taille 4k.
Quelque articles/exemples pratiques plus détaillés sur le sujet:
https://www.codeur.com/tuto/css/unite-de-mesure-taille-px-em-rem/
https://developer.mozilla.org/fr/docs/Learn/CSS/CSS_layout/Responsive_Design
https://developer.mozilla.org/fr/docs/Web/CSS/Media_Queries/Using_media_queries
sinon il y a ça mais ça posera plus de problèmes que ça n'en résous: https://www.w3schools.com/js/js_window_navigator.asp