ProTip #5: HTML tags for responsive web design: Viewport

Oxford Plus ProTips

Home |> HTML |> ProTip #5: HTML tags for responsive web design: Viewport

Hi guys,

Welcome to an HTML ProTip, Figure 1.

Figure 1. Logo for HTML ProTips!!!

As a website programmer, you have to be aware of Viewport meta tag importance,

Without using Viewport meta tag, when we open our website in a smartphone, we will encounter with some problems, for example Login buttons will seems very very small. This problem appears in case of logos and picture labels (Figure 2) ...

Figure 2. Left: without Viewport, right: with Viewport

Without Viewport meta tag, picture previews also seems in an unwanted size (Figure 3) ...

Figure 3. Left: without Viewport, right: with Viewport

Inserting this meta tag in HTML code of webpage is very easy and in Figure 4, you can see how it is possible.

Figure 4. Using Viewport meta tag in HTML

Good luck

Oxford Plus Website

Written by: Abdolreza Ghanbari
Views count: 256

This page has updated in

  • 17 June 2021

Leave a reply:

Your Name (Optional):
Your Email (Optional):
Note: Your email address will not be published.
Your Comment:

Security process: What is the sum of 14 And 8 ?
About Us

Oxford Plus ProTips
Powered by ContentO Plus v3.1