Mobile Redirect

Discussion in 'HTML' started by Jeff Thies, Mar 25, 2014.

  1. Jeff Thies

    Jeff Thies Guest

    I have a client with a site that has a mobile subdomain.

    There are a number of ways to redirect and an unholy number of devices.

    What I thought was to through up a large mobile type link once. There is
    a mobile link in a normal font elsewhere.

    So:

    function runSwitchLink(){
    if(window.screen.width < 800){
    if(!document.getCookie('asked')){
    document.write('<a href="javascript:location.href=' +
    "'http://mobile.some-site.com/mobile_redirect.php'" + '"
    class="asked">Switch to Mobile Site</a>');

    document.cookie = 'asked=yes;path=/';
    }
    }
    }

    runSwitchLink();

    // document.getCookie defined elsewhere

    Site requires cookies (cart), so cookies off is not an issue.

    I think screen.width takes into account dppx oversampling, and I think
    it is available always, even before page load. Is this right?

    Other ideas?

    Jeff
     
    Jeff Thies, Mar 25, 2014
    #1
    1. Advertisements

  2. Jeff Thies

    jfaerber172 Guest

    Haha - well said!
    I don't know if it's a good idea to use javascript
    maybe it's working with my phone that way.
    Google is always redirected to the mobile version on my screen
    automatically - dunno how that works.
    Interesting to read your post.
    I thought I will have to fight with the different CSS @media entries.
    Long way ahead for me dude - don#t give up
     
    jfaerber172, Mar 28, 2014
    #2
    1. Advertisements

  3. Jeff Thies

    Jeff Thies Guest

    For your benefit, since I think know one else here cares there are a
    number of ways that Google determines which page to serve. On way is to
    make a site map where the mobile pages are marked. Format like this:

    All this assumes a separate mobile site...

    <?xml version="1.0" encoding="UTF-8" ?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
    xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0">

    <url>
    <loc>http://mobile.some-site.com/some-page</loc>
    <mobile:mobile/>
    </url>

    The second is to provide link alternative for each of your full site pages:

    <link rel="alternate" media="only screen and (max-width: 700px)"
    href="http://mobile.some-site.com/some-page" />

    and for the mobile pages, a link rel="canonical" back to the main page

    If you have a single site that serves all devices then you would not
    need this, but not all sites are suitable to that approach. You would
    then use the media query approach.
    You can. For a simple site this may be the best approach. I've just
    converted a Wordpress blog that was heavily styled in a 3 column layout
    over to mobile with a number of media queries and hiding/showing stuff.
    It's doable but you have compromises to make.

    Jeff
     
    Jeff Thies, Mar 29, 2014
    #3
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.