1485 sujets

Web Mobile et responsive web design

Bonjour,
savez vous comment je peux tester mon code responsive selon la taille de mon écran, alors que je n'ai qu'un seul écran?
Est ce valable en utilisant la fonction "réduire la fenêtre" des navigateurs?

Merci pour votre aide.
Bonjour Abeille,
Si vous avez GOOGLE CHROME, allez ici http://lab.maltewassermann.com/viewport-resizer/.
cliquer/déposer le gros bouton "click or bookmark" et lâchez-le sur votre barre de favoris.
Après l'utilisation est peu complexe : cliquez sur l'élément <->Resizer et les formats
mobiles - tablette - bureau s'afficheront en haut de votre navigateur.
Choisissez-en un et le test de mise en forme s'appliquera en fonction du site que vous avez à l'écran.
J'aime bien ce petit outil, même si il ne propose pas énormément de format.
Vous avez aussi http://quirktools.com/screenfly/ ou bien http://ami.responsivedesign.is/ qui sont des mise au format en ligne que je trouve un peu plus ardu de compréhension.

Cordialement,
Régis
Modérateur
Salut !

Ouep le resize de fenêtre suffira généralement a valider 90% de ton responsive.

Tu peux utiliser le debugger par defaut de ton navigateur (F12 sous Chrome) il y a un petit bouton en haut a gauche représentant des écrans qui pourra te simuler tout ce que tu veux en terme de taille. https://www.alsacreations.com/astuce/lire/1649-decouvrez-inspecteur-element-responsive-google-chrome.html

Le reste et bien le mieux c'est d'avoir quelques plateforme a disposition pour tester ou bien utiliser des plateforme de simulation qui vont simuler divers OS / navigateurs / taille (mais sur ca je suis pas super callé).

Il y a parfois des petits bug d'affichage ou d’interprétation de code qui peuvent apparaître sur certain OS avec certain navigateur... assez chiant a détecter et reproduire (du genre le float mal géré, le flex chelou https://www.alsacreations.com/astuce/lire/1701-images-responsive-flexbox-bug-ratio.html , le position:fixed, les tailles de viewport...).
C'est un trou sans fond vu le nombre de device mais si le code est assez simple (et que tu as bien suivi les tutos alsa Smiley langue ) et que tu as bien regardé les compatibilité des propriétés CSS les plus récentes il suffit de vérifier sur quelques téléphones récent (demander a des amis quand on les croise ou a la famille) pour valider le tout.
Modifié par _laurent (07 Mar 2018 - 17:43)
Bonjour,
Tu as plusieurs outils en ligne et sur les navigateurs entre autres. Mais le mieux c'est de faire l'expérience sur des différents devices. C'est que les outils, même si ton site est responsive peuvent donner un bon résultat mais sur un vrai device, il se peut que d'autres détails ne soient pas à leur place. Mais c'est vrai que ce n'est une mince affaire de trouver plusieurs types de devices.