HTML Tips and Information

Viewport Meta Tag Usage

How to use the viewport meta tag to make your pages display correctly on mobile devices

Do you have an older website that's been around before the new iPhones and Android invasion?

Here's how to make it display correctly in the mobile phone and tablet browsers using the viewport meta tag.

Viewport example: <meta name="viewport" content="width=device-width, initial-scale=1.0" />

In most cases, this simple little line of code will make your site fit in the "viewport" of the mobile browser, although there are a some unique cases where an exact width must be set, along with maximum-scale and other options as well. (when setting a width, it should be in pixels, like this <meta name="viewport" content="width=960, initial-scale=1.0">)

Other options include:

minimum-scale (default is 0.25)
maximum-scale (default is 5.0)
user-scaleable (can be set to yes or no)

Experiment with these options and customize it to fit your site. Remember to separate each value with a comma


Need Help? We Offer Complete Web Design and Programming Services

From start to finish, we will assist you in developing a web site, that will conform to your business and individual requirements, and most importantly, generate sales and grow your business. We will also help you to understand the web design process, and supply you with all the information you need to make informed decisions. Please call us toll free with any design or development questions you may have. We offer professional work to give you professional level results.

Whether you're looking for a new web site or just want to upgrade your existing one, you've come to the right place. We can handle everything from web design, e-commerce, PHP, custom scripting, Flash, databases and email. We'll even write or edit all your web site content for you. Then, we can also handle all your web hosting, and domain name needs if you need it. Fencl Web Design truly is your one stop shop for a new web site.