1 Star2 Stars3 Stars4 Stars5 Stars (4 votes, average: 5.00 out of 5)

Viewports for Mobile Header Tags Quick Reference

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.

Subscribe To My YouTube Channel:

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.

Viewports for Mobile Header Tags Quick Reference was last modified: December 1st, 2015 by Maximus Mccullough

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Viewports for Mobile Header Tags Quick Reference

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.