Responsive Meta Tag
Mobile First
When writing our CSS we should put our defaults at the top to apply to all devices.
These defaults should be focused on MOBILE sized screens.
We call this mobile first approach.
- This way, older mobile devices that don't understand the media queries, will still display the default values that are optimized for mobile small screens.
- We will be leveraging the default styles of the elements before adding layouts in the media queries.
This YouTube video was created by Steve Griffith.
The Viewport Meta Tag
The browser's viewport is the area of the window in which web content can be seen. Because of high-density and different size displays, this is often not the same size as the rendered page, in which case the browser provides scroll bars for the user to scroll around and access all the content.
The inclusion of the viewport meta tag tells a browser to adapt the site to its own display characteristics.
We add the following meta tag in the <head></head> of the HTML document.
<meta name="viewport" content="width=device-width, initial-scale=1">
This YouTube video was created by Steve Griffith.