Design reattivo - Media Query non funziona su iPhone?

Sto provando a creare una versione del mio sito web ottimizzata per i dispositivi mobili, per rendere il mio sito web reattivo a dimensioni dello schermo più piccole e scalare di conseguenza.Design reattivo - Media Query non funziona su iPhone?

Ho creato alcune query multimediali, che si comportano correttamente in un browser durante il ridimensionamento su un desktop.

Sul mio iPhone, Safari riduce solo l'intero sito ma mantiene le proporzioni del sito di dimensioni complete. Come posso osservare la richiesta dei media? ho perso qualcosa?

Ecco un link ad una sandbox, che sto cercando di far funzionare correttamente - qualsiasi aiuto o suggerimenti sono apprezzati:

http://www.preview.brencecoghill.com/

fonte

2012-10-21 Gearu

Avete il meta per la porta vista nel tuo html?

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

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

fonte

2012-10-22 00:09:42 coopersita

grazie mille per la risposta .. questa risposta mi aiuta molto .. ma piccola correzione il mio amico coopersita .. ti manca una chiusura "sul tuo tag;) –

LOL! Risolto. Grazie. – coopersita

ho tentato per modificare questa risposta per correggere la sintassi errata ma è stata rifiutata. Dovrebbe essere (quasi come la risposta dell'utente1506194): '' – penfold

Penso che troverete un avviso in Chrome con; invece di, Questo dovrebbe funzionare bene:

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

fonte

2013-08-21 13:07:21

Ho modificato la risposta accettata in quanto questa sintassi è corretta. – penfold

ho appena vissuto la cosa più bizzarra dopo la risoluzione di questo stesso problema per un giorno. Qualcosa da provare se tutto il resto fallisce ...

Le mie pagine erano perfettamente reattive sul mio portatile durante lo sviluppo ma non sul mio iPhone, iPad o Samsung. Alla fine ho scoperto che ho dovuto mettere una riga di commento dopo l'istruzione DOCTYPE e prima dell'istruzione lang html, in questo modo:

<!DOCTYPE html> 
<!-- This comment line needed for bootstrap to work on mobile devices --> 
<html lang="en">

Infine, le mie pagine erano sensibili sui dispositivi mobili. Strano!

fonte

2018-03-03 23:16:34 Filemangler

Design reattivo - Media Query non funziona su iPhone?

risposta

Problemi correlati