Adding a Desktop Mobile Toggle Button - Hallo sahabat Jendela Dunia Internet Dan Tekhnologi, Pada Artikel yang anda baca kali ini dengan judul Adding a Desktop Mobile Toggle Button, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Bootstrap, Artikel Desktop/Mobile, Artikel ResponsiveDesign, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Adding a Desktop Mobile Toggle Button
link : Adding a Desktop Mobile Toggle Button

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;
});

Demikianlah Artikel Adding a Desktop Mobile Toggle Button

Sekianlah artikel Adding a Desktop Mobile Toggle Button kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Adding a Desktop Mobile Toggle Button dengan alamat link http://jendeladuniainternet.blogspot.com/2014/06/adding-desktop-mobile-toggle-button.html

Tweet