Viewports for Mobile Header tags are something that I think we should be able to just copy and paste. It makes things faster when you are programming.
A Viewport tag will auto enlarge text on smaller screens so they are mobile friendly. You would put this code in your header.php file.
<meta name="viewport" content="width=device-width, initial-scale=1">
Pixels are not an exact Measurement *
When you are using viewport tags it is important to note that pixels are not an exact measurement. See this article about pixels to get a better understanding. It will help you understand there is a difference between device width pixels and CSS pixels.
Using the Viewport Tag For Mobile Widths *
This is just a quick article to let you know that when you want a mobile friendly website use the viewport tag so things are scaled to a device.
You can also target widths in the viewport tag for pages that have a maximum scale.
<meta name="viewport" content="width=500, initial-scale=1">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
I created this post for my own quick reference. There is a more in depth article on this located here.
I hope you enjoyed the article. If I was able to help you please consider a tip for the content.
One Time Tip