Redirect / Hide a specific HTML user is there on a mobile device?
I'm working on my website and putting the finishing touches on it so I can show it to employers when I start my job hunt since I'm graduating soon. I've built an "about" section that uses parallax scrolling ... the problem is it just doesn't work on mobile. At least not very good. This is what I mean: http://www.jordanmorgan.net/about.html
What I would like to do is just break everything together if they are on a device less than 900px wide, or any other amount. I'd rather just show the traditional about me page. So how can I write some javascript, detect which device they are using and display different HTML or navigate to a different page if needed if they are on the specified device.
Any advice would be helpful on how best to resolve the issue, thanks!
source to share
I actually did this myself today and I got the following feature ...
function isMobile() {
return (typeof window.orientation !== 'undefined');
}
Determines whether mobile device or not, whether orientation change can occur (does not occur on a desktop device).
This is preferred for me as it means I don't have to worry about user agent values changing on some devices, and I don't have to go back and add new browsers as they come out.
Also, many handheld devices now have very high screen resolutions, so you can't rely on screen size either.
source to share
You can use JavaScript to send a different url to the visitor.
<script type="text/javascript">
if( navigator.userAgent.match(/(android|blackberry|ipad|iphone|ipod|iemobile|opera mobile|palmos|webos|googlebot-mobile)/i) )
{
document.location.replace("/mobile/");
}
</script>
You can also do responsive web designs
which would be the best solution for both your user and SEO.
source to share
mobileDeviceCheck: function(system) {
if(system) {
if(navigator.userAgent.match(system)) {
return true;
} else {
return false;
};
} else {
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)) || (navigator.userAgent.match(/Android/i))) {
return true;
} else {
return false;
};
};
}
Versatile function
source to share