La conception Web réactive fonctionne sur le bureau mais pas sur un appareil mobile

117

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 j'ajuste les fenêtres du navigateur, cela fonctionne parfaitement pour le téléphone portable, mais lorsque je le vérifie sur mon vrai téléphone portable: Samsung Galaxy S2 il ne répond pas à la vue mobile.

Quel pourrait être le problème?

mobile web responsive-design

— Tadas Davidsonas
source

1

Vous allez devoir ajouter plus d'informations et de code pour que tout le monde soit utile. Votre CSS, HTML, etc. Quel framework (tel que Twitter Bootstrap) vous utilisez, le cas échéant, etc.

— ajacian81

308

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

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

Sans cela, l'appareil prend en charge et définit la fenêtre en taille réelle.

Plus d'infos ici .

— Agush
source

2

Il peut fonctionner sur navigateur sans cette ligne, mais sur mobile, il a juste besoin de cette ligne.

— Tadas Davidsonas

3

Je t'aime juste

— Dimitris Filippou

Je t'aime aussi @ ΔημήτρηςΦιλίππου

— Agush

Un autre mot d'amour pour vous

— btlm

3

assurez-vous que la production index.htmlinclut réellement le tag ainsi que le développementindex.html

— halafi

6

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

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

— Islam Saiful
source

2

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, n'oubliez pas de fermer la balise d'élément

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

— Shadab Ahmed
source

-1

Balise meta responsive

Pour garantir un rendu et un zoom tactile appropriés pour tous les appareils, ajoutez la balise Meta de la fenêtre d'affichage responsive à votre <head>.

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

— Marcelo Autriche
source