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">
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
ReplyDeleteI'm sure this is a couple years too late...but...for anyone else finding this snippet, it'll be a good FYI:
DeleteYou 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 :)
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.
DeleteI 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...
ReplyDeleteAnyone else having the same issue that has a solution?
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.
DeleteThanks again for this great solution!
This comment has been removed by a blog administrator.
ReplyDeleteI appreciate your thought process, excellent points… I may just “steal” a few of your thoughts for my blog! apple tablet mockup
ReplyDeleteGoing 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
ReplyDeleteI 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
ReplyDeleteI 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
ReplyDeletePerhaps you need to revise the actual perl server in your hosting company, Live journal will be kinda gradual. iphone device template
ReplyDeleteI 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
ReplyDeleteThis 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
ReplyDeletePretty 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
ReplyDeleteWork 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
ReplyDeletePositive 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
ReplyDeleteGathering 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
ReplyDeleteThis 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'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
ReplyDeleteThis is really a nice and informative, containing all information.Check it out here:ajker mobile
ReplyDeleteI 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/
ReplyDeleteI 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
ReplyDeleteThis information is impressive; I am inspired how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic snowflake data warehouse
ReplyDelete