Change a website layout on mobile browsers

Here’s a quick tip to remember when you want to ensure that your site will display correctly on a mobile browser. Simply add

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

So let me explain what’s going on. First we use “viewport” as the meta name as we are going to be setting the width of the viewport or the viewing area of the mobile browser. Then we set the content of this meta tag to “width=device-width” at this point it should be quite clear that we have told the mobile browser to set the viewport to the default pixel size of the device. And finally we set a second option on the content to “initial-scale=”1.0” this of course means when the site first loads on the browser it should load at 100%.

So by adjusting the width and initial-scale options you can ensure that your site will load correctly and not be off center nor zoomed in. Below you will find the meta tag I used on my project Statify

<meta name="viewport" content="width=600, initial-scale=1.0"/>