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.
Top comments (16)
Grid layouts are the best way to make most of the website's responsive,
But you also do it with media queries in css
@cmuralisree Thanks for taking out time to read. Its good to hear about Grid when discussing responsive websites but just to mention, responsive websites aren't as simple as "big stuff on bigger screen and smaller elements on smaller screens". You will need media queries when you want to hide/show some component based on the screen size for example. This is only one example. Remember grid can not rule out the application of media queries.
You can participate in this discussion if you feel like. For ease I will quote my favorite answer from the forum.
Cheers :)
Making responsive pages are big task, and it's true grid cannot replace the media queries, but grid can lower the usage of media queries in certain pages,
For ex: e-commerce items, news cards, for those you can make,
grid layouts
Note: these can only be used on few pages or sections, but we can't use them everywhere
flexbox
There are still lot to learn about grid or flex,
but we cannot swap media queries by using grid or flex box, these are only limited to few styles, but rest we have to use media queries
thank you for inviting me to the discussion, I will definitely look into it
I am coming conversant with the flexbox. Would try the grid too
Yeah flexbox Is good, it's older than grid, but also the most searched stuff in caniuse.com,
Bur grid is newest entry to the web and it has a lot to offer than flexbox, but also bit complicated than flexbox,
flexbox needs to be combined with queries to make it responsive,
But grid mostly doesn't need queries because of inbuilt layouts and other attributes.
These were upto my knowledge, I might be wrong
I would love you to share how to write grid without queries please.
As I said Previously grid cannot entierly used without media queries, but in few cases we can stop using queries,
Ex: grid-template-columns: using this we can make a page like {youtube, ecommerce, or few blogs} responsive without using queries, this will make the elements inside it to be take the given ammount and renders it on the screen based on screen size,
link : codepen.io/murali-sree-krishna/pen...
you can alter the number of divs or components displayed on the screen by increasing the size in "grid-template-columns: repeat(auto-fit, minmax(size, 1fr));"
These were upto my knowledge, I might be wrong
Very helpful buddy... Thanks
When it comes to responsive pages, the first thing I remember is
css grid.I've always struggled using media queries for various reasons.
@ashkanmohammadi Thanks for taking out time to read. Its good to hear about Grid when discussing responsive websites but just to mention, responsive websites aren't as simple as "big stuff on bigger screen and smaller elements on smaller screens". You will need media queries when you want to hide/show some component based on the screen size for example. This is only one example. Remember grid can not rule out the application of media queries. Cheers :)
Nice post, thanks!
:)
I enjoyed this very much.
@mickeydluffy I am glad you liked it :)
Nice post. I enjoyed reading this. Thanks!
@rakeshkb glad you did, thank you :)