When viewing a website on different devices, we of course expect it to resize to the available device width automatically with no loss of experience; unfortunately, not every site does this quite the right way or successfully!
To understand why this is important, let's assume we operate a desktop version of our site (one in the 1280+ group in this screenshot), and a mobile equivalent from the 418-768 group:
The first stage in making our site responsive is to add the viewport directive; without it, we are likely to end up with a similar effect to this when resizing our sites:
See what I mean? It looks awful—text is cut off, we would have to swipe to the right...ugh! In stark contrast, adding one line of code can have a dramatic effect:
Our example uses the Google Chrome set to emulate an iPhone 6 Plus. The code needed to restore sanity to our example can be added to the <head>
of our code:
<meta name="viewport" content="width=device-width,...