The Key Element to Responsive Websites

What is the first thing you think of when someone says responsive websites? What comes rushing to your mind when you think of the most important piece of code related to responsive websites? CSS? relative units (%)? Media queries? Well, we won't talk about that here. This post aims to pin point the most essential stuff without which none of your responsive techniques would ever work the way you expect them to. We are talking about the html tag. Well, but you know meta tags have got nothing to do with what's being rendered, right? They just carry information regarding the page content. They do not even appear on the page themselves. How do they matter when it comes to making our web page responsive?

There's a special meta tag called the meta viewport, which actually has a lot to do with how well your page adapts to the screen it is rendered on. Lets dig deep.

<head>
    <title>Meta Viewport Example</title>
    <meta name="viewport" content="width=80, initial-scale=1.0">
</head>

Look at the code snippet that shows a meta tag enclosed within the Head section. The name attribute says viewport. That should be enough to indicate that this tag is supposed to add some kind of information related to the viewport - the space on the screen on which your web page is being rendered. Lets not confuse the viewport width with screen width. They may be the same when the rendering device is a mobile phone (we shall talk about this later in the same post) but on desktops and PCs, you can play with the size of your browser. Check out the following piece of code. Paste it in your browser console and resize your window to see how the viewport width changes.

window.addEventListener("resize", () => { 
 console.log(document.documentElement.clientWidth); 
});

Now that we hopefully understand the difference between the physical screen width and the viewport width, let me break it to you that mobile phones generally (if not all of them) do not map the viewport to the exact dimensions of the screen (width). You can check out some real examples here. So for example if a mobile phone's screen is say 320px wide, it may consider a virtual viewport that is 800px, 900px wide or whatever and then minimize (zoom out) the rendered output to fit the screen size. Why would they do so you ask? This comes from back in time when responsive websites were not that common maybe. Even today not all websites are made mobile friendly (which indeed isn't what we want to do). If the mobile browser vendors mapped the viewport width of the browser to the screen width, the elements in the real website (big images/big buttons etc..) would break when rendered on such a small viewport. So they render it on a bigger viewport and then scale down the result to show it to you on a smaller screen. You can then zoom in on the part you want. You want an example? Checkout YouTube but do it on your desktop and then resize your window to make sure you do not go to m.youtube.com which is another version meant specifically for mobile phones.

YouTube Desktop (not optimized for mobile experience)

This however, is not an ideal experience for websites which are made mobile friendly. Can you guess what sort of issues can this virtual viewport cause? You guessed it, didn't you? The media queries will start breaking. If you put in place a media query that should fire at 320px, it simply won't get triggered because factually the screen width is 900px which was just zoomed out to show it to you on a 320px wide mobile screen. What do such mobile browser vendors do for developers like us who write media queries to make our websites look good on all screen sizes? Well, they gave us this meta viewport tag which we can now use on our web page and tell the browser, to set the virtual viewport's width in accordance with our needs. So now when you say

html <meta name="viewport" content="width=device-width" />

, the mobile browser knows that you want to render your page with a virtual viewport that is as wide as the device's screen. Of course, you can set this "width" value to random pixels but that does not bring us joy. You can see the examples on w3school.

Interestingly, if you use boilerplate builder tools like create-react-app, vue create etc.. you may or may not have bothered to go through the index.html file completely. If you do a cross check, you shall definitely find the meta viewport tag included in the head section. Get rid of it for a while and see how your web app behaves on different screen sizes. Hopefully now, everyone can relate to the virtual viewport of mobile browsers.