Il responsive web design funziona sul desktop ma non sul dispositivo mobile

117

Ho un sito web che deve essere reattivo per i telefoni cellulari. L'ho creato utilizzando il mio desktop. Quando modifico le finestre del browser funziona perfettamente per il telefono cellulare, ma quando lo controllo sul mio vero telefono cellulare: Samsung Galaxy S2 non risponde alla visualizzazione mobile.

Cosa potrebbe esserci di sbagliato?

mobile web responsive-design

— Tadas Davidsonas
fonte

1

Dovrai aggiungere ulteriori informazioni e codice affinché chiunque sia utile. Il tuo CSS, HTML, ecc. Quale framework (come Twitter Bootstrap) stai utilizzando, se presente, ecc.

— ajacian81

308

Probabilmente ti manca il meta tag viewport nell'intestazione html:

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

Senza di esso, il dispositivo assume e imposta la visualizzazione a grandezza naturale.

Maggiori info qui .

— Agush
fonte

2

Può funzionare su browser senza questa linea, ma sui dispositivi mobili ha solo bisogno di questa linea.

— Tadas Davidsonas

3

Ti amo e basta

— Dimitris Filippou

Ti amo anche io @ ΔημήτρηςΦιλίππου

— Agush

Altre parole d'amore per te

— btlm

3

assicurati che la produzione index.htmlincluda effettivamente il tag e lo sviluppoindex.html

— halafi

6

Ho anche affrontato questo problema. Finalmente ho una soluzione. Usa questo codice qui sotto. Spero: il problema verrà risolto.

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

— Saiful Islam
fonte

2

Sebbene sia risposto sopra ed è giusto da usare

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

ma se stai usando React e webpack, non dimenticare di chiudere il tag dell'elemento

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

— Shadab Ahmed
fonte

-1

Meta tag reattivo

Per garantire un rendering corretto e lo zoom al tocco per tutti i dispositivi, aggiungi il metatag viewport reattivo al tuo file <head>.

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

— Marcelo Austria
fonte