I made the following simple pen to try to better understand these concepts…
screen.width inside the div.
When I look at this on my iPhone 6 in portrait vs landscape, the div color changes as I would expect, but the number being printed to the div does not change, even when I load the page already in landscape or use that Go button I added to recall the function. (Screenshots below).
screen.width not mean what I think it means?
I’m also confused about how width and device-width play into the viewport. Every article I’ve read on the subject says you should almost always use width instead of device-width when doing media queries, but every time I see the viewport meta tag mentioned everybody is always saying to use
I feel like I must be missing something fundamental here. Why would we set the viewport based on device-width, but then set all of our media queries base on width?
Sorry, I know this is more of an amorphous blob of multiple questions rather than one distinct question. Any guidance is appreciated though.
(It won’t let me use more than one upload or more than two links since I’m a new user, so there’s a link to the portrait screenshot below, followed by the landscape portrait in the body).