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.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂
<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

Please like, share and subscribe.

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


Cool People Share:
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.