Send Links To Alternate Link On Mobile

Here’s the scenario. You’ve built a lovely responsive website, but you are integrating a 3rd party’s application as part of your offering. Their site is built primarily for the desktop, but it works well enough on the mobile. Finally, they’ve built a nice mobile app for using, but the mobile looks like a turd on the desktop. You want desktop browsers to go to one place and mobile browsers to go to another.

Adding this little javascript in the header of your page will make it so any link can be directed to the desktop site unless you’re browsing from a mobile device. Unfortunately, javascript is required for it to work, but who doesn’t have javascript anymore?

If you’re working with WordPress, just drop this first little snippet in the header.php right above the </head> tag and all of your pages can link this way.

Add this part in the head:

<script type="text/javascript">
function sendtomobile(desklink,moblink) {
   if ( /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
window.location = moblink; } else { window.location = desklink; }
}
</script>

You’ll notice that there aren’t any sites defined in that first bit of code. The best part here is that you can put multiple links on the page without adding more javascript. For each link, use the ‘onClick’ event to call the javascript, putting in the links as parameters. The first link will be the one you want the desktop browser to visit, the second being the mobile version. The last thing you’ll have to do is change the ‘href’ to a # or #linkname so that it doesn’t follow that link before running the javascript.

Add this to your link:

Click Me!

This article has 6 comments

  1. kk Reply

    Hello
    when i am adding this code before in my themes header.php
    %MINIFYHTML3eb5bddcc474286eb75ca8a1e11691f77%

    the code is visible to front end on website.
    how i have to paste it exactly?

  2. Paul Cushing Reply

    Sorry about that kk.

    I am using W3 Total Cache to speed things up a bit, and it caught the javascript code and minfied it. I’ve adjusted the page so the bit of code doesn’t get minified.

    Hope that helps. 🙂

    • kk Reply

      Hey Paul,

      That’s worked for me. found a new thing that i was looking with simple way.

      Thanks.

    • kk Reply

      Hello Paul,

      Just a one query.
      when we click on link it opens target link in same tab & user redirects to with another tab.
      as its little confusing to people to switch over tabs.
      so in my view when we click user should go to target link tab first.
      check the link “android app” in this page http://goo.gl/s41rh2

  3. Paul Cushing Reply

    Got it. Thanks for the link, that helped me figure it out. 🙂

    You’re using “_blank” on the target for the href. Normally, if the javascript isn’t run at all, the page is reloaded with the #name appended to the current page. When you add the target=”_blank”, it opens the link in a new page. You’re right, that would be confusing. Just remove the target=”_blank” from the link and I think it’ll do what you want.

    • kk Reply

      Hello Paul,

      Its right, i have checked by removing target=_blank in my loaclhost server & the link is opening fine in new target as i want.
      but don’t know why its not working in my live site. i found there is by default rel=”nofollow” target=”_blank” for all the links & i am not able to find where its coming from. i have checked by disabling some of the plugins also.
      still it take some time to search myself what is wrong.

Leave a Comment

Your email address will not be published. Required fields are marked *