Zoom in on Bootstrap mobile

Question

I'm putting together responsiveness for a client of mine (the site is using Bootstrap 2) but I'm having an issue. When I visit the site on my mobile device (HTC X8) I notice that it isn't really zoomed in to where it would look good.

Here is the link I'm using, and the result on my phone: http://www.gigee.me/draft/index.php?/account/login (if the site redirects you to just gigee.me, type in the rest of /draft/index.php?/account/login and it should work)

---

---

However, I want it to be more zoomed-in. Just like it looks when you are scaling down in a browser.

I think this might be a simple fix. I believe most of my HTML and CSS is correct.

I would really appreciate any and all help with this.

Answer 1

Most mobile devices utilize what is called a "virtual viewport". Essentially, what this means is that even though the device itself is relatively very small compared to a regular laptop / desktop monitor, it still displays at a high resolution. For example, newer versions of the iPhone and iPad both display at a virtual viewport of 980px. So even though you have a Bootstrap 2 responsive website with breakpoints at 768px and 980px, your phone is actually displaying the website at the desktop or tablet version since its virtual viewport is most likely higher than its actual viewport.

What you need is to detect phones (and tablets if you choose) and tell the document to render a viewport zoom if the user is using a mobile device.

In your HTML head tags, add the following

<meta name = "viewport" id = "viewport_device">

Then include the following JavaScript in your document after the jQuery library reference

    if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/Android/i)
    || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/IEMobile/i)){
        $("#viewport_device").attr("content", "initial-scale = 0.50");
    }
    else if(navigator.userAgent.match(/iPad/i)){
        $("#viewport_device").attr("content", "initial-scale = 1.00");
    }

The IF statement will detect all major mobile browsers. If a phone is detected, the initial-scale is set to 0.50. This is essentially telling the browser to zoom in 50%. If an iPad is detected, then the initial scale is set to 1. Depending on your page, you might want to play with these values to see what values look best for your site.