Responsive Web Design - The Viewport
The Viewport is probably the most important aspect of Responsive Web Design. I was surprised that I had some code from 2011 that had a Viewport Meta Tag. I admit that I had no clue what it was at the time.
As usual I took my main inspiration from the W3C website and lookig at my CSS for responsive design I must have copied a whole chunk of code from there not really knowing what I was doing. The Clearfix is a prize example of this as born out by the .row class that clears the floats for the layout. The MDN pages give a fuller desciption of the Viewpoint tag and also point to the CSSWG (CSS Working Group) that seems to be the source document.
This is a simplistic overview.
The viewport is the user's visible area of a web page.
For a fuller explanation go to the W3C website.
- CSS Position
- CSS Media Query
- The new Responsive layout
- Setting the Viewport- Where I came across Allen Pike
- Responsive Web Design - The Viewport - 🔗 - W3C
- CSS @media Rule - - W3C
- Using the viewport meta tag to control layout on mobile browsers - 🔗 - MDN
- CSS Device Adaptation Module Level 1 - 🔗 - CSSWG
- Responsive Web Design - Media Queries - 🔗 - W3C
Responsive Web Design - The Viewport - January 2021