Mobile Website Code

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
mnwitten
 
 
Posts: 36
Joined: Sun Aug 17, 2008 10:29 am
Location: Newfoundland, PA
Contact:

Mobile Website Code

Post by mnwitten »

While I love WB's responsive features, what I decided I need is one desktop website and one mobile website. The problem was how to handle everything properly...or at least how I wanted it. The following script was my solution. Feel free to use this if you wish, modify it, make it better and re-post it or whatever. I'm simply providing this for other WB users.

I've placed this script in the HEAD section (SITE HTML) of my desktop website (mywebsite.com for example). I placed a modified version of this script (see comments in script) in the HEAD section (SITE HTML) of my mobile website (mywebsite.mobi for example). This script will check if the user is entering either site from mywebsite.* and if they are...it won't redirect. If they are coming from anywhere else, it will redirect based upon the device (mobile or desktop). The reason for this is I wanted to place this code globally in the website to run on every page and provide GO TO DESKTOP SITE and GO TO MOBILE SITE icons on my sites for users who wish to choose, regardless of device, what site to use. Without using a cookie, etc...this code works because it won't redirect if the user is coming from the other site. After the script are some of my reasons for wanting to do this.

<script>
//=========================================
// Detect referrer and device then redirect
//=========================================
referrer = document.referrer.toLocaleLowerCase(); //new URL(document.referrer).hostname;
if (referrer.indexOf("mywebsite")==-1)
{
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
// Mobile device
// Comment out if installing this script on mobile website
window.location="http://www.mywebsite.mobi";
}
else
{
// Non mobile device
// Comment out if installing this script on desktop website
// window.location="http://www.mywebsite.mobi";
}
// end detect
}
else
{
// Do nothing
}
</script>

1. I wanted both sites contents and images to be indexed by Google and a responsive site wouldn't do that. It would index them only once under a single domain. As far as I understand.
2. I wanted separate Google Analytics for tracking each site without having to filter the view.
3. I wanted the mobile user to be able to view the desktop website in it's full glory which won't work with a responsive website. The device size would always force the mobile responsive site.
4. I may want to code (eg. script) differently on the desktop and mobile site. As far as I know, you can't easily do that with a responsive site.
5. Etc.

So...if this is useful to you, please feel free to utilize it as you wish. If you can improve on the script...please do and please post your updates for others (and myself).

You can view this code "in action" at any of these WB websites I've written:
SkinYourSkunk.com / SkinYourSkunk.mobi
DeepBlueThemes.com / DeepBlueThemes.mobi
OnlineWatersports.com / OnlineWatersports.mobi
Post Reply