CODEWITHSUNDEEP
google-chromeresponsive-designmedia-queries
James Gregory
James Gregory

Reputation: 35

Why is Google Chrome mobile device emulator showing my 320 pixel wide site as it is?

I've added media queries to my website so that the pages display at a width of 300 pixels, if the "max-width" of a user's browser is less than 480 pixels.

My question is this: When I view the pages using Google Chrome's device emulator - and the emulator quite clearly says that the width for the Apple iPhone 6 is "375" pixels wide, why does my 300 pixel wide website display at a much narrower width (about 100 pixels)?

I'm confused because when I view the website via my standard PC browser and reduce the width of the browser - everything is fine. When I use the emulator, even though it specifies that Apple iPhone 6 has resolution of 375 pixels, why do the web pages shrink to about 100 pixels wide?

Any ideas?

Upvotes: 2

Views: 1539

Answers (1)

David Taiaroa
David Taiaroa

Reputation: 25495

Have you included the meta tag

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

in your page header?

Upvotes: 6

Related Questions