Adding a Desktop Mobile Toggle Button

The goal of a Bootstrap site is to deliver a mobile view that is so easily navigable that it never leaves the user yearning for a tiny shrunk down desktop experience on their phone. Still, despite a developers best intentions, some users just want what they want. And we should give it to them. We’re not designing sites so that we may enforce our will on others, but to provide content that users find easy to view, and some users have different preferences than others.

Luckily, we can easily provide both worlds, and default to a responsive view with the hopes that they will find it so convincing they’ll never need the desktop view.

Here’s a little snippet of code that I like to put on websites. You can see it in action on: http://kylemitofsky.com/

Add two toggles to your page.

<!-- Desktop / Mobile Footer -->
<div id="DesktopMobileFooter" class='h_center'>
    <hr/>
    <div class="MobileToggle">
        View <a id="DesktopSite" href="#" >Desktop</a> | <strong>Mobile</strong> Site
    </div>
    <div class="MobileToggle" style="display:none;">
        View <strong>Desktop</strong> | <a id="MobileSite" href="#" >Mobile</a> Site
    </div>
</div>

Then add the following JavaScript:

$(".MobileToggle a").click(function () {
    var viewport = ($(this).attr('id') === "MobileSite") ?
                    'width=device-width, initial-scale=1.0' :
                    'width=1200';
    $("meta[name=viewport]").attr('content', viewport);
    $(".MobileToggle").toggle();
    return false;
});

NOTE: As AJ pointed out in the comments, for this solution to work (and Bootstrap in general) make sure you’ve included the tags from Bootstrap’s Basic Template, specifically the viewport meta tag:

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

15 comments:

  1. Hi Kyle, I have tried your solution it changes the view port but the site does not refresh. Could you please provide me the relevant solution for this ? Thanks,Ankit

    ReplyDelete
    Replies
    1. I'm sure this is a couple years too late...but...for anyone else finding this snippet, it'll be a good FYI:

      You need to make sure to add the necessary viewport meta tag, otherwise there's nothing to update the content of:

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

      After adding this (remove the space between "<" and "meta" since it wouldn't let me post it here without a space), it'll work as expected; no refresh needed :)

      Delete
    2. Thanks AJ - yeah, it's part of bootstrap docs and bootstrap isn't really going to work without it in the first place, but doesn't hurt to have the reminder here as the solution is aimed at manipulating it specifically. I'll also add the snippet to the post so google doesn't try to remove angle brackets to prevent html injection.

      Delete
  2. I did however, notice, in case anyone else has had this issue - on the newer Mobile Safari (iPhone 6 and later I guess) I'm seeing that as soon as I try to pinch zoom, it reverts back to the responsive site. I'm guessing it's that the viewport size is being changed when the zoom occurs, but still messing around with it...

    Anyone else having the same issue that has a solution?

    ReplyDelete
    Replies
    1. Ok, fixed it...turns out the version of Bootstrap I was using has a viewport fix that changes the viewport size on gesture. I added a conditional statement with a bool in session storage that allowed me to keep the fix when responsive, but removed when desktop size.

      Thanks again for this great solution!

      Delete
  3. Activatehulu.com help you to activate your hulu. you can watch hulu shows online. hulu com activate or www.hulu.com/activate are related words for hulu activation.
    Hulu.com/Activate


    ReplyDelete
  4. However you will be required to subscribe by paying the amount in advance for the talk time you want to utilize. fix phone shop

    ReplyDelete
  5. Thanks For sharing this Superb article.I use this Article to show my assignment in college.it is useful For me Great Work. blackmart apk app november 2017 _ APK For All

    ReplyDelete
  6. https://ussdcodes.in You know your projects stand out of the herd. There is something special about them. It seems to me all of them are really brilliant!

    ReplyDelete
  7. Hello! I just want to give a huge thumbs up for the great info you have here on this blog. I will be coming back aimed at your website for additional soon. ipad mockups

    ReplyDelete
  8. A unique mobile app idea can literally change the world. Apps like Facebook, Pinterest or Uber are immensely popular today, not due to the fact that those were started by famous business personas. It is rather the innovative approach of these mobile apps that has taken the technological world by storm.Top 10 Mobile App development Companies in UK

    ReplyDelete
  9. I was very pleased to find this website. I wanted to thank you for your time for this wonderful post!! I definitely enjoy reading it and I have you bookmarked to check out new stuff you blog post. device mockups

    ReplyDelete
  10. I consider something really special in this website . macbook png

    ReplyDelete
  11. Not knowing the true difference between V72.85 - Other specified examination and V72.84 - Pre-operative examination unspecified, can also lead to coding mistakes. Again, look for key words or phrases to choose the correct code.best ergonomic chair

    ReplyDelete