Il sito web reattivo è stato ingrandito a larghezza intera su dispositivo mobile

139

Sto testando la reattività Bootstrap navbar e ho un sito Web dimostrativo . Quando ridimensiono il browser su un desktop, tutto funziona benissimo, inclusa la barra di navigazione che diventa menu pieghevole con una piccola icona in alto su cui posso fare clic per vedere altri pulsanti di menu.

Ma quando l'ho provato da un browser mobile (l'ho provato su Chrome e browser Internet su un Android), non ho visto il design reattivo. Ho potuto vedere solo una versione molto piccola di desktop come un sito Web.

Qualcuno potrebbe sottolineare cosa sto facendo di sbagliato?

— lawphotog
fonte

378

Aggiungi questo al tuo capo HTML ..

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

Questo indica ai browser di dispositivi più piccoli come ridimensionare la pagina. Puoi leggere ulteriori informazioni al riguardo qui: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

— Zim
fonte

1

ho aggiunto questo codice nella sezione head ma non funziona per il mio Internet Explorer predefinito di Android che puoi controllare - www.freerechargeapp.com/index.html

— santosh

Davvero non capisco perché per me non funziona. In un sito Web funzionano e in un altro sito Web no. E la struttura del codice è simile con il nuovo bootstrap

— bheatcoker il

1

@Skelly - Altre risposte che ho visto lasciate fuori maximum-scalee usate al 1.0posto di 1. Sai se queste cose fanno la differenza?

— onebree,

1

Mi hai salvato :) Grazie.

— Fatih

1

Grazie due anni dopo il tuo post è ancora lo shiznizzle (sic.) 😎

— Walt,

17

come suggerito qui http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

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

sarebbe una scelta ancora migliore in quanto rende il passaggio da ritratto a paesaggio e viceversa un'esperienza utente molto più piacevole poiché con / height si adotterebbe naturalmente a causa del possibile ridimensionamento automatico.

— Tom
fonte

Grazie, questo ha risolto il problema del ridimensionamento su iPhone e mostra ritratto e paesaggio in modo diverso (e corretto).

— SexxLuthor,

0

Aggiungendo questo per le persone che cercano questo errore per cui la risposta accettata non funziona. Credo che questo sarà un caso più raro, ma comunque frustrante:

Se il rendering della tua pagina all'interno di un set di frame (ad esempio il cloaking del dominio), inserire i metatag non sarà di aiuto. Dovresti metterli nella pagina sul dominio di occultamento, a cui potresti avere o meno accesso a seconda del tuo host DNS.

— Giorno Davis Waterbury
fonte

0

Prova a svuotare la cache del browser e apri la pagina in una nuova scheda. Questo a volte risolve il problema per me ogni volta che succede.

— John Q.
fonte