Feature Detection Touch events

A lot of people think that using the navigator agent to detect mobile / desktop is not correct. They swear by feature detection instead…and I suppose they have a point.

Here is a simple function which will allow touch events to work on both mobile and desktop devices.

Update: I recently found the above code not working as well as I wanted on some projects. I found another good way to use touchstart when available is like so:

Going forward I will use this.

PHP Mobile Detection

Sometimes I want to know what type of device the user is using on the server side of things. I imagine others have had this issue as well (legacy sites). The biggest issue this tends to resolve is the including of the meta ‘viewport’ tags. These can muck up a perfectly fine website when used and NOT NEEDED.

NOTE: If you have to use this PLEASE only use as a quick fix and NOT as a full solution. Your site should be responsive or, failing that, it should work and display on mobile devices. This should be something you are aware of from the very start of development.

I just want to make it clear that this is a HACK and not good practice at all.

Javascript Mobile Detection

Found on StackOverflow http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-handheld-device-in-jquery#answer-3540295

Seems to work pretty well. Have not tested on all devices but does work for all Android and iOS devices I tested

Slide In Mobile Menu

So this one will be a bit tricky and since I don’t intend to do a full length post to explain hopefully you can figure it out. This site is for my benefit anyway you don’t have to use this code.

This code will add a nice mobile menu which will slide in from the left and push the body of the page to the right at the same time. I set up my own tablet menu since I had a hard time working with the standard tablet menu scripts out there.

Note: I am building the ul > li structure in the menu using the WordPress wp_nav_menu($args); function so if you are not using WordPress this will require significantly more work...but if you are not using WordPress there is already a problem.

Note: I am also using FontAwesome icons to show the “direction” of the menu navigation. I am not going to tell you how to set that up but if you haven’t used it before just know it is awesome.

Note: You will need to find your own menu-btn.png. I also recommend checking out retina.js so that you can setup a menu-btn@2x.png image for retina users.

First we need to build the HTML

I just put this code right after the <body> using an include but you can figure out where you want to put it.

Create the Menu Walker

If you are not familiar with walkers, these classes are built into WordPress and basically just build the menus for you. I have had to setup some pretty crazy walkers to parse through the building of a menu but this one actually simplifies the default Walker a bit…I am not even sure it is needed.

Just place this code in its own file and call it Walker.php

 Setup the LESS Styles

If you are not familiar with LESS then I can’t really help you here. If you know CSS though you should be able to figure out what is happening here and build your own CSS from this.

 Setup the Javascript

This menu wouldn’t be very useful without the following Javascript.

I think that is all there is too it. Hopefully I didn’t miss anything. Good Luck!