First steps into resposive development - Defining the view port

Your site is rendering fine on your laptop? It is easy to reach that first one as you are developing there, but what happens when you render your site on a mobile device or a tablet? I can guess that if you are reading this is because it is doing weird stuff in there.

Old school guys never worried about this as everything was rendered on desktop/laptop PCs, nowadays a site is used from almost any kind of screen, from your mobile to your smart. And with that you fall into the situation were the site starts rendering weird because the viewport was never defined.

A little background about that, your site (due to the CSS styles) are rendered using CSS pixels as a reference. What? A CSS pixel? The box of my phone says its resolution is 1080p... hand tight dude, 2 new players in da' hourse. That resolution mention in the box are the pixels as we now 'em, let's call them hardware pixels as those are the ones that the screen physically has, the first "new player" is DPR and it refers to "Device Pixel Ratio", and using that value there we get the DIP that refers to "Device Independent Pixels". Basically all this means that your screen will be render using DIPs (A.k.a CSS pixels), and that is calculated by dividing the number of hardware pixels by the DPR, meaning that if your screen is 1080p wide with a DPR of 2 then the actual resolution being used to render your site will be 540p. 

Well it is fine, the browser will just understand that... and actually he does, but as there are no instructions on what to do on those smaller resolutions it starts guessing what can be boosted (A.k.a. font boosting) to let the user have a better experience, and actually it normally does more hurt than helping, but you can easily tell your browser how to react by defining the view port with some meta data on the head:

<meta name="viewport" content="width=device-width,initial-scale=1">

 

Category