2016-04-13 37 views
14

Ho usato Chrome DevTools per ridimensionare il viewport a 480 px di larghezza, come mostrato di seguito.Perché il viewport di Chrome DevTools Responsive pensa che sia largo 980px?

Sto usando il layout di griglia del bootstrap, quindi ho un div.container che sto usando, come mostrato in basso a sinistra. Quando passo il mouse sopra, vedo che chrome ha quel particolare div contrassegnato come larghezza 750px (e l'intero body è 980px), anche se ho chiaramente lo schermo impostato a una risoluzione più piccola. Anche il righello in alto mostra che è largo 480 px.

Per ulteriori conferme, è possibile visualizzare la query multimediale che dice che la larghezza di 750px deve essere impostata solo a risoluzioni più elevate (min 768px), quindi il viewport presuppone che sia più largo di quello che è.

Sono in errore nel capire come viene utilizzata la funzione di risposta?

Grazie!

enter image description here

+2

Che valore che avete nei metadati di finestra? – Justinas

+0

È il tag ''? Ho controllato il '' e non ho visto nulla con quel nome, quindi immagino che usi un valore predefinito? – user2490003

+0

Ah, ho trovato questa pagina che spiega cos'è il tag 'meta'. Quando l'ho aggiunto, è stato risolto il problema. Grazie per il suggerimento! https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/set-the-viewport?hl=it – user2490003

risposta

14

Per accettare risposta

Come indicato nei commenti: vi manca meta tag con finestra che è necessario per la media-query per avere effetto.

+0

Gah! Grazie, grazie, grazie! Stavo iniziando ad andare un po 'pazzo ... :) – rinogo

2

Come indicato sopra, l'aggiunta di un metatag nell'intestazione HTML risolverà il problema. Di seguito è l'elemento viewport, che dovrebbe essere incluso in tutte le pagine web

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