search

SeanTankGarvey / f1-3-c2p1-colmar-academy

1 stars 0 forks source link

add this to your head section #1

Closed rimmesbe closed 7 years ago

rimmesbe commented 7 years ago

I highly recommend adding this line into the head section whenever you use media queries:

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

https://github.com/SeanTankGarvey/f1-3-c2p1-colmar-academy/blob/master/ColmarAcademy-Capstone/index.html#L7

SeanTankGarvey commented 7 years ago

If I was to use the viewport meta, then my screen stops resizing at 540px. Meaning anyone who had a device/cell in portrait mode would be forced to touch-navigate left and right to see the content rather than it being sized for their screen.. Maybe I could get around this problem by adding a min-width to my media queries..?
PS: I read the article on the viewport tag as well, and FYI, I use to use it but I actually stopped using it once I started adding media queries. I'm under the impression that it is best for a strictly mobile-only or tablet-only site, that is entirely media queried.

SeanTankGarvey commented 7 years ago

Ignore what I said. When I turn on the DevTools, I am able to resize the browser down to 150px, just like before. I will apply that meta tag in the future even though I still do not fully understand it except that it gives a preset zoom of the page equal to the screen width and that it allows for zooming in and out of a page by touch on a mobile site. Is that about right? Assuming you use the following viewport meta tag: