Have you designed a site to only find out that on your mobile device it looks really small? Or maybe half of your site’s side gets cut off on mobile devices. Well it turns out there is a very easy fix for this that most browsers support. The solution is to use the <viewport> tag in your header. There are a lot of options that we will briefly touch over.
[box type=”info”]This will not make your website responsive, it just locks the width for your mobile devices [/box]
So the first thing we are going to do is add the default tag to your header which is just:
<meta name="viewport" content="width=1024">
Demo of this can be found on our sister signoff site here:
[button url=”http://signoff.me” color=”dark_gray” liquid=”no”] See Demo (Look at the source code it will be at the top of the page) [/button]
This will force mobile devices to 1024 resolution. This will be equivalent to setting your screen to 1024 pixels. Now let’s look at what we have on our signoff site
<meta name="viewport" content="width=1040, initial-scale=0.7 maximum-scale=2">
this sets our width to 1040, then there is the initial-scale property this controls how the page is scaled when it’s first loaded. We are also setting the maximum-scale this will not allow users to zoom in twice the original amount. This is useful if you have small fonts on your page. There are also other options that we are not using like
- minimum-scale (minimum scale users are allowed to zoom in, so setting this to 1 will disable zooming)
- user-scalable
How do i know what settings to use?
As you can see from example above I am setting the width to 1040, not 320, which is the width of most mobile devices. The reason for that is I don’t want my page to be zoomed out to 1280 thus making things really small. At 1040 the page looks good and we zoom it in to 0.7 thus focus the user on the top text.
What do devices use?
A comprehensive list of mobile resolutions and their view ports can be found at i-skool
Let us know how you are using this setting!