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