129 votes

La conception Web réactive fonctionne sur le bureau mais pas sur le dispositif mobile.

J'ai un site web qui doit être réactif pour les téléphones mobiles. Je l'ai créé en utilisant mon ordinateur de bureau. Lorsque je règle le navigateur Windows, il fonctionne parfaitement pour les téléphones mobiles, mais lorsque je le vérifie sur mon vrai téléphone mobile : Samsung Galaxy S2, il ne répond pas à la vue mobile.

Quel pourrait être le problème ?

338voto

Agush Points 1279

Il vous manque probablement la balise viewport meta dans l'en-tête html :

 <meta name="viewport" content="width=device-width, initial-scale=1">

Sans cela, le périphérique suppose et définit la fenêtre d'affichage en taille réelle.

Plus d'informations aquí .

7voto

Saiful Islam Points 94

J'ai également été confronté à ce problème. Finalement, j'ai trouvé une solution. Utilisez ce code ci-dessous. J'espère que le problème sera résolu.

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

4voto

Shadab Ahmed Points 16

Bien qu'il soit répondu ci-dessus et qu'il soit juste d'utiliser

<meta name="viewport" content="width=device-width, initial-scale=1">

mais si vous utilisez React et webpack alors n'oubliez pas de fermer la balise element

<meta name="viewport" content="width=device-width, initial-scale=1" />

1voto

Marcelo Austria Points 391

Balises méta réactives

Pour garantir un rendu correct et un zoom tactile pour tous les appareils, ajoutez la métabalise responsive viewport à votre fichier <head> .

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X