Resize Your Page for Mobile Using the Meta Viewport Tag

HTML5 Can Make Your Life Easier

With everyone now using smartphones and tablets designers need to take note. You can no longer just build a website with only desktop in mind. That is a format that is quickly disappearing, it’s still necessary too but when we do a design job these days the mobile version usually takes priority.

With that in mind HTML5 has a variety of new tags to help the average website designer & developer optimize for mobile.

WordPress and Magento and most other CMS’ these days are overflowing with pre-made themes that are already built with responsive functionality. But what if you need to go “old-school” and design a custom page? How can you optimize a hand coded html page for Mobile screen sizes? We’ve got you covered.

Resize Your Page for Mobile Using the Meta Viewport Tag

As you can see in the screenshot below, the custom page we created for this client has a lot of empty space. Put that on a mobile device and what happens is the menu and logo are shrunk down to fit in the screen with the overall resolution of the page. This makes the menu look tiny and invisible. How do you fix this?

Well to start, I had to build the page as a custom home page and upload it into my theme folder. (WordPress allows you to create custom HTML pages and select them – but that’s another tutorial.) Once I got the page up it looked like this on desktop:

full-size-custom-html

The problem is it also looked like that on mobile so it was really difficult to tap the correct menu links. That’s when I discovered you can resize your page for mobile using the meta viewport tag. The tag looks like this:

<meta name=”viewport” content=”width=320″ />

and all you have to do is put it in your meta tags when you declare your page. After adding this to my page and placing my menu inside of a div container that will smash the menu down the same page on mobile now looks like this:

viewport-optimized-page

 

And that’s how you do it! It’s that simple – HTML5 really does make life easy for the modern web designer.

(source: http://www.html5hacks.com/blog/2012/11/28/elegantly-resize-your-page-with-the-at-viewport-css-declaration/)

Leave a Reply

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