Best way to stop specific JavaScript function on mobile devices

Question

For my current project, I am using parallax scrolling on the website, and am currently developing the mobile/tablet versions of the site.

At current, parallax scrolling doesn't work well on tablets and mobiles due to the difference in the scroll event, so I am wanting to disable the javascript calls in my scripts file when a mobile device is detected. At the moment I am doing this using

if ( $(window).width() > 960) {

and then firing my parallax code. I am wondering if there is a better way of doing this that will target devices rather than resolution, as I am aware that a lot of the screens on the market will exceed 960px in width.

The current version of the site is available at http://beta.residencyradio.com if you want to see how it works, but any help at all would be appreciated!

Answer 1

Solution to Detect Mobile Devices

Check out the Detect Mobile Browsers website. There are a series of scripts for different languages, including JavaScript, that can be used to include different behavior when a mobile browser is detected.

The scripts, by default, will simply load another URL if a mobile browser is detected. It is designed to load the mobile version of your website if a mobile device is detected.

However, with a slight modification, you can use the script to set a "flag" that you can use when determining whether to perform a different behavior, yet still load the same website for all devices. I modified the code below with an alert("mobile detected") placeholder entry below:

isMobile=false;(function(a,b){if(/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))alert("mobile detected")})(navigator.userAgent||navigator.vendor||window.opera,'http://detectmobilebrowser.com/mobile');

Near the end of this script, where it says alert("mobile detected") just replace that with isMobile=true. If the script detects a mobile browser, that flag will be set to true.

I left the alert in there so you can run the script with different devices to see the alert.

Form Factors and Design Tips

Now, I do want to point out that the form factors for mobile, tablet, and desktop are vastly different. Additionally, the way users interact with these 3 form factors is also drastically different. This may mean that building one website for all 3 platforms may either harm usability and prevent you from creating the best user experience for all 3 platforms.

In my experience, the mobile and tablet websites that I've enjoyed using the most were designed specifically for those devices. In other words, they weren't just existing websites or Web applications that someone modified in an attempt to make things "fit" the mobile and tablet platforms.

Instead, the mobile and tablet versions of those websites with a high degree of usability were designed, from the ground up, independent of the desktop version, so that updates, bugfixes, design changes, etc, could all be made just to one platform so the two could diverge independently to fit the use cases for users on each platform.

For example, I recently built two Web forms, one is designed for desktop browsers and the other is designed for mobile browsers. The desktop version is in one HTML file and the mobile version is in another HTML file. The mobile version uses jQuery Mobile, so it has touch, slide, and other capabilities that make interacting with the site a pleasure on mobile devices. It also feels more like a mobile app and feels more "native". The desktop version has more UI elements that involve mouse-clicks or keyboard shortcuts, and looks more like a website than a mobile app.

Since I don't know the exact details of your application, you'll of course want to take a look at what you're doing and ask yourself if it would be easier and more user friendly if you created mobile/tablet versions independent of the desktop version.

Answer 2

I would suggest using the Modernizr.touch test in this case. Like you say, it's common that touch events are only fired on the completion of a 'scroll' on a touch device.