Thursday, August 13, 2015

User agent redirect to mobile friendly page


Although I prefer to use responsive design, there are still occasions where a redirect to a mobile variant is a good choice. to do this, add the following code between the <head> tags on your web pages:

<head>
<script src="mobile.js" type="text/javascript"></script>
<script type="text/javascript">DM_redirect("mobile/index.html");</script>
</head>

Then create a text file named mobile.js and paste the following into it:

// JavaScript Document
function DM_redirect(e,r){try{if(document.getElementById("dmRoot")!=null){return}var n=(document.location.search||"").substr(1)||"";if(n.indexOf("no_redirect=true")>-1){return}if(!navigator.userAgent.match(/^[^\[]*(iPhone|iPod|BlackBerry|Android.*Mobile|BB10.*Mobile|webOS|Windows CE|IEMobile|Opera Mini|Opera Mobi|HTC|LG-|LGE|SAMSUNG|Samsung|SEC-SGH|Symbian|Nokia|PlayStation|PLAYSTATION|Nintendo DSi).*$/im)){return}var o=["^utm_.+?","^gclid"],t=n.split("&")||[],i=[],a,c;for(a=0;a<t.length;a++){for(c=0;c<o.length;c++){if(t[a].match(o[c]+"=")){i.push(t[a]);break}}}if(!r){i.push("url="+encodeURIComponent(location.href))}i.push("utm_referrer="+encodeURIComponent(document.referrer));if(i.length){e+="?"+i.join("&")}location.replace(e)}catch(l){}}

make sure the .js file is in the same directory as your web pages with the code added to the header.

Now, create a directory called "mobile" and put your mobile friendly pages inside. Make sure the home page is called "index.html".

Dave White is a veteran small business advertising specialist with more than 25 years advertising experience. DaveWhiteMultimedia.com

Thursday, May 9, 2013

JavaScript to redirect to a smart phone formatted page


This little script, placed between the <head> </head> tags will redirect to a different page if the user's screen size is less than 699 pixels wide. This is useful if your normal web page has, for example, two or more columns, which don't display well on a small screen, or other content that does not work well on a smart phone. I recommend creating a single column page with basic information and font size in ems or percentage so that it is readable for the resulting page.

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "http://www.your_mobile_webpage.html";
}
//-->
</script>