Grow your CSS skills. Land your dream job.

How do i make the mobile version of my website display only on mobile phones?

  • # March 10, 2013 at 10:59 am

    how do i create a mobile version of my website that only shows in mobile phones.? i just want to know how i can adapt the version of my website to only mobile, i’m not talking about styling and code.

    # March 10, 2013 at 12:58 pm

    @Jarolin, if you’re talking about a completely different “mobile-version” of your site, rather than a responsively designed site, you’d create the site just like your desktop version, using css and html, create a mobile sub-domain (ie m.example.com), store your mobile version in the new subdomain, then use a redirect to detect if the users browser is mobile.

    Although there’s several different ways to redirect traffic, here’s a snippet provided on css-tricks http://css-tricks.com/snippets/javascript/redirect-mobile-devices/

    # March 11, 2013 at 12:35 pm

    Check out http://detectmobilebrowsers.com/
    It is super easy to use, it works well and it is available in whatever language you prefer: ASP, JQuery, JavaScript, PHP, and a bunch of others…

    # March 11, 2013 at 4:05 pm

    /* Smartphones (portrait and landscape)


    */
    @media only screen
    and (min-device-width : 320px)
    and (max-device-width : 480px) {
    /* Styles */
    }

    # March 11, 2013 at 4:12 pm

    That’s styling though, Jarolin said he wasn’t talking about that. Apart from that, I can image there are smartphones with smaller than 320px or bigger than 480px screens (for example iPhone 5 and Galaxy SIII)

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".