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">

74 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. This comment has been removed by a blog administrator.

    ReplyDelete
  4. I appreciate your thought process, excellent points… I may just “steal” a few of your thoughts for my blog! apple tablet mockup

    ReplyDelete
  5. Going for PDA repair is a decent alternative as repair stores can get your messed up phone fixed, just as recoup and hold all the information you have in your phone. Iphone reparatur

    ReplyDelete
  6. I really like your take on the issue. I now have a clear idea on what this matter is all about.. buy instagram video views idigic

    ReplyDelete
  7. I have read your excellent post. This is a great job. I have enjoyed reading your post first time. I want to say thanks for this post. Thank you... cellphone battery

    ReplyDelete
  8. Perhaps you need to revise the actual perl server in your hosting company, Live journal will be kinda gradual. iphone device template

    ReplyDelete
  9. I have read a few excellent stuff here. Definitely price bookmarking for revisiting. I wonder how much attempt you set to create the sort of fantastic informative site. device mockups

    ReplyDelete
  10. This is the best blog Ive ever seen in my life! I really appreciate you taking the time out of your busy day to share your this with everyone. iphone png

    ReplyDelete
  11. Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info. whatsapp gb download

    ReplyDelete
  12. Work area the board has gotten more helpful, direct and financially savvy because of the rise of the idea. Encouraged by methods for work area virtualization innovation help in abstracting the working framework, applications and related information from the client's PC. shareit

    ReplyDelete
  13. Positive site, where did u come up with the information on this posting? I'm pleased I discovered it though, ill be checking back soon to find out what additional posts you include. Windows based CRM

    ReplyDelete
  14. Gathering plans that offer clients the capacity to put the entirety of their gadgets on a similar record alongside information use are beginning to become famous, yet whatever information plan is picked, it should be checked after the advanced mobile phone buy to guarantee that unreasonable information utilization doesn't drive up bill cost. Watching out for information use is imperative to dodge overages, and advanced cells regularly accompany straightforward highlights to assist clients with keeping on top of their use easily. mobile tracker free

    ReplyDelete
  15. This is really a nice and informative, containing all information and also has a great impact on the new technology. Check it out here:ajkermobile

    ReplyDelete
  16. 'Continuously on' recording for business and administrative consistence and administration necessities. Coordinates the capacity to apply call recording to an expansion, a mobile or a shrewd Number - this is upheld through steering for both fixed and mobile calls. iphone 12 deals india

    ReplyDelete
  17. This is really a nice and informative, containing all information.Check it out here:ajker mobile

    ReplyDelete
  18. I have recently started a blog, the info you provide on this site has helped me greatly. Thanks for all of your time & work https://satta-king.center/

    ReplyDelete
  19. I also heard about this agency's amazing service with creating brand sticky names. They were able to give all the ideas and inspiration that I was lacking.  Mobile phone repair shop in New York City

    ReplyDelete
  20. Today, I was just browsing along and came upon your blog. Just wanted to say good blog and this article helped me a lot, due to which I have found exactly I was looking. hoverwatch reviews

    ReplyDelete
  21. WhatsApp is one of the top chatting apps available for Android and other smartphones. GBWhatsapp download on your smartphone.

    ReplyDelete
  22. OREO TV MOD APK is a very popular movie streaming app. You can download it to your Android TV or phone to conveniently watch TV, movies

    ReplyDelete
  23. Thanks for the blog post buddy! Keep them coming... website

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. Experts inside a Healthcare Consultingcompany accomplished a 10 to 15% usefulness acquire because of diminished phone tag. oppo a15 price in bangladesh

    ReplyDelete
  26. Love to read it,Waiting For More new Update and I Already Read your Recent Post its Great Thanks. phone locator

    ReplyDelete
  27. That's right you read it right... A wireless watch, it's another period of innovation that has shown up, is here and continues to progress. I can barely comprehend what will be next.https://mobilemob.com.au
    www.mobilemob.com.au

    ReplyDelete
  28. Berkshire Mobile Mechanics we come 2 you for all your motoring requirements Vehicle Servicing VAN Repairs Mots Home or work 01189581198 Mobile Mechanic Wargrave

    ReplyDelete
  29. There are consistently advancing innovations of computerized reasoning and information mining that go far in further developing charging and the executives arrangements, by anticipating the chance of protection claims being denied, hailing broken coding, and mechanizing the coding system. At last, CAC amplifies the sum that can be guaranteed by the medical services supplier, which is the way to holding clients. https://clientica.org/product-category/website-development

    ReplyDelete
  30. kids coding curriculum Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I'll be subscribing to your feed and I hope you post again soon. Big thanks for the useful info.

    ReplyDelete
  31. This post is so helpfull and informative.Keep updating with more information...
    Full Stack Development Services
    Full Stack Cloud Developer

    ReplyDelete
  32. Nice article. Thanks for the information

    ReplyDelete
  33. Hey, Thank you for sharing this amazing and useful article with us. I hope you will publish such articles in the future as well. I would love to see more. It’s so helpful. Good Bye! Take a look at this wonderful article

    ReplyDelete
  34. When you know which embellishments interest you the most, you'll have the option to get everything rolling concluding what brand and type to purchase. Notwithstanding, there are a couple of things to remember, so you don't wind up with a futile adornment, or one that you need to return. phone case manufacturers

    ReplyDelete
  35. This mobile SIM furnishes the business with full command over calls and texts, both broadly on the facilitated network and while Roaming. sonnerie telephone gratuite

    ReplyDelete
  36. Download KineMaster Prime Apk with no watermark. Kinemaster prime download and get benefits from its new advanced features. It's 100% working, unlocked, and premium mod apk of Kinemaster Official Version. Kinemaster Prime is a most popular and downloadable app for video editors with android phone. If you wish to use it in iPhone, Then you can also use it from our Kinemaster iOS Download Source. You can also try Kinemaster Mod Apk for all latest updates.

    ReplyDelete
  37. Download Apk Latest Version of PhotoRoom MOD, The Photography App of Android, This PRO Apk Includes Unlocked All And No Watermark. Get Your Apk Now!

    PhotoRoom MOD APK
    Picsart Mod apk

    ReplyDelete
  38. A specialist call local area inside a Travel Insurancecompany dealt with 25% more calls as a prompt eventual outcome of extended responsiveness of staff.
    phone case manufacturer

    ReplyDelete
  39. These courses are mainly for working professionals who can devote their time only in the evening or weekends. Mobile Alabama iphone repair shop near me

    ReplyDelete
  40. This comment has been removed by the author.

    ReplyDelete
  41. We are really grateful for your blog post. You will find a lot of approaches after visiting your post. I was exactly searching for. Thanks for such post and please keep it up. Great work. 50% discount

    ReplyDelete
  42. You Can Download FM WhatsApp APK For Android And Start Using This Revolutionary MOD right away.

    ReplyDelete
  43. Awesome post,Thanks for the detailed article on this topic. I would like to see more such awesome articles from you.I am truly pleased to read this information which carries lots of helpful data.I read that Post and got it fine and informative,please share me some informational tips about coding via yo whatsapp download.

    ReplyDelete
  44. Amazing, this is great as you want to learn more, I invite to This is my page. Satta king 786

    ReplyDelete
  45. Thanks for sharing such great information colourist logo

    ReplyDelete
  46. https://apkuno.com/ is always selective to bring you the best games, in a whole new way. We work non-stop to make sure everything is fresh and up to date.

    ReplyDelete
  47. Thanks for the info
    JAMB results 2022 is out, kindly see how to check jamb result 2022

    Very informative content.
    Are interested in obtaining a low interest loan in Nigeria? if so, check out NYIF Loan

    Good Post
    See the direct JAMB result Checker portal login
    Great content.
    Read about MTN night plan to surf the internet on Night with a full speed and low cost.


    Good post read on how to apply for FRSC recruitment

    ReplyDelete
  48. its your desktop whatever you want to add this is your choice what can i say about this
    https://apkstick.com/seaport-mod-apk/
    RedStar

    ReplyDelete
  49. Android application PacKage called APK An application file ready for installation in an
    Android device. The compressed APK file, which is a ZIP archive in the JAR format



    PUBG Mobile KR APK

    ReplyDelete
  50. Reverse phone search websites have indeed proved to be a boon these days, especially to single women of big cities. People never admit it, but it is quite scary to be living all alone in a big city. https://kidstracker.io/

    ReplyDelete
  51. It is rather very good, nevertheless glance at the data with this handle. Computer repair

    ReplyDelete
  52. The mobile telephone causes costs at a similar rate as a proper telephone.
    mobile price

    ReplyDelete
  53. Merge Tank is clicker simulation game with funny cartoon art style. Collect all awesome battle vehicles: KV-44, leviathan, gerand, panzer, tiger and more. This game is full of action and have lots of features. Merge Tank mod Apk is a best arcad game.

    ReplyDelete
  54. This comment has been removed by the author.

    ReplyDelete
  55. This comment has been removed by the author.

    ReplyDelete
  56. One of the key advantages of Plain Lanyards in Ireland is their simplicity. They come in a variety of colors, allowing organizations to choose a shade that matches their brand or event theme.

    ReplyDelete
  57. The Entire Testing process involves a systematic and comprehensive approach to identifying defects, evaluating functionality, and verifying that a product meets the desired specifications.

    ReplyDelete

  58. check insurance and mot both insurance and MOT (Ministry of Transport) status are essential responsibilities for every vehicle owner.

    ReplyDelete
  59. The world of Best Watches is a timeless blend of craftsmanship, innovation, and sophistication, with some timepieces standing out as the best of the best. These exceptional watches are revered not just for their accuracy in measuring time but for the stories they tell, the engineering marvels they embody, and the elegance they exude.

    ReplyDelete
  60. The Desktop Mobile Toggle is a pivotal feature for responsive web design. Can You Use It empowers users to seamlessly switch between desktop and mobile views, ensuring optimal user experience on various toggles.

    ReplyDelete
  61. Redmond Painter are making significant contributions to the contemporary art world, and their work is sure to continue to inspire for years to come.

    ReplyDelete
  62. Chain Link Fence Marysville are a popular choice for homeowners and businesses in Marysville, Washington, and for good reason. They are durable, affordable, and easy to maintain. But with so many different chain link fence companies in Marysville to choose from, how do you know which one is right for you?

    ReplyDelete
  63. โปรโมชั่น pg slot รวมโปรสล็อต PG โปรโมชั่นดีๆสุดพิเศษและก็ร้อนแรงมาเสนอแนะสำหรับคุณ สำหรับสาวกสล็อตตัวจริงต้องห้ามพลาดกับโปรโมชั่นที่พวกเราเตรียมความพร้อมมายกให้คุณทุกวัน

    ReplyDelete
  64. Its influence extends globally, shaping how we connect, learn, and navigate the vast realms of information online. As a catalyst for innovation and a symbol of technological prowess, Google continues to redefine what is possible in the digital age.



    ReplyDelete
  65. This comment has been removed by the author.

    ReplyDelete
  66. This comment has been removed by the author.

    ReplyDelete
  67. This comment has been removed by the author.

    ReplyDelete