A peeve of mine is when browsing by mobile device, a website determines for you that you are only going to see their mobile site without any options.
If you visit this blog on a mobile device, you will see it as anyone from a desktop/laptop would see it unless you are on an iPhone/iPod Touch or certain BlackBerry smartphones. But, you have the option to view it normally with the flick of a switch (located at the bottom of the page). WordPress makes this very easy with a variety of plug ins.
Okay, now that I have that off my chest, I will explain an easy way to do something similar with your webpages even if you don’t have access to server side functions. If you visit our Service page with a desktop computer or laptop, you will see a normal site with a sprinkle of flash (more on that later). If you visit with a mobile device such as an iPhone/iPod Touch and some BlackBerry smartphones you will see a section at the very top of the page (you could put this just about anywhere you wanted) that tells you of the option to visit a mobile edition. This is done by using a little javascript and an empty div. You then call the javascript function on load so the user doesn’t need to click on anything. When the javascript function is called, it puts a link and message in the empty div. You could obviously use this script to open or close a div with a special message or link for other reasons too.
Below is the code and description on were to put it.
Put this in the opening body tag:
<body id="page1" onLoad="init()">
</div> |
<body id="page1" onLoad="init()">
</div>
Now put the following script inside the body somewhere
<script type="application/x-javascript">
// I use userAgent instead of platform on the Apple device so I don't have to put in two different statements (navigator.platform.match(/iPod/i)) ||
function init() {
if (((navigator.userAgent.match(/iPhone/i)) || (navigator.platform.match(/BlackBerry/i))) ) {
var o = document.getElementById( 'iphone-ipod-notify' );
o.innerHTML = "<h1 style='text-align:center;border: 2px solid #a23e14; -webkit-border-radius: 10px;'><a href='http://www.bickford.net/m'>Tap here if you would like to visit our mobile portal!</a><br /><br />Otherwise, enjoy your visit. Clicking on the following perfomance image will toggle the flash container.</h1>";
}
}
</script> |
<script type="application/x-javascript">
// I use userAgent instead of platform on the Apple device so I don't have to put in two different statements (navigator.platform.match(/iPod/i)) ||
function init() {
if (((navigator.userAgent.match(/iPhone/i)) || (navigator.platform.match(/BlackBerry/i))) ) {
var o = document.getElementById( 'iphone-ipod-notify' );
o.innerHTML = "<h1 style='text-align:center;border: 2px solid #a23e14; -webkit-border-radius: 10px;'><a href='http://www.bickford.net/m'>Tap here if you would like to visit our mobile portal!</a><br /><br />Otherwise, enjoy your visit. Clicking on the following perfomance image will toggle the flash container.</h1>";
}
}
</script>
Now, put the empty div where you want it (usually at the top)
<div id="iphone-ipod-notify"> </div> |
<div id="iphone-ipod-notify"> </div>
Now the user has a choice!