web-dev-qa-db-fra.com

La conception Web réactive fonctionne sur le bureau, mais pas sur le périphérique mobile

J'ai un site web qui doit être réactif pour les téléphones mobiles. Je l'ai créé en utilisant mon bureau. Lorsque je modifie les fenêtres du navigateur, cela fonctionne parfaitement pour un téléphone mobile, mais lorsque je le vérifie sur mon vrai téléphone mobile: le Samsung Galaxy S2 ne répond pas à l'affichage mobile.

Quel pourrait être le problème?

mobilewebresponsive-design
104
Tadas Davidsonas

Il vous manque probablement la balise meta viewport dans la tête html:

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

Sans cela, l'appareil assume et définit la fenêtre d'affichage à sa taille maximale.

Plus d'infos ici .

256
Agush

J'ai aussi fait face à ce problème. Enfin, j'ai une solution ... Utilisez ce code ci-dessous. Hope: le problème sera résolu.

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

2
Saiful Islam

Bien que la réponse soit donnée 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, n'oubliez pas de fermer la balise element

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

Vérifiez votre CSS ou utilisez CSS Validator.

    Parse Error

   .navbar .nav li a {
    padding-right: 5px;
    paddng-left: 5px;

Il semble que vous n'ayez pas fermé votre accolade ou votre faute de frappe.

0
Marcelo Austria