Laptop with touchscreen UserAgent

Question

I am investigating how to differentiate tablets with Windows 8 and other devices. According to this doc http://msdn.microsoft.com/en-us/library/ie/hh869301%28v=vs.85%29.aspx there should be "Touch" token in UserAgent in tablets with Windows.

But I am worried, will laptops with touchscreen also have this token in UserAgent. Unfortunately, do not have such device and test in myself.

Can someone please confirm that this "Touch" token is used in Internet Explorer for tablets and mobile phones only?

Answer 1

Mozilla says... ish.

var isTouch = 'ontouchstart' in window || 
          navigator.maxTouchPoints > 0 ||
          navigator.msMaxTouchPoints > 0;

Answer 2

You cannot guarantee that any token, let alone the touch token, will be used only for Windows tablets or phones. Period. For example, the UA string can be modified by third party controls, group policy, and even the end-user. It's unpredictable, at best.

I know of no standard that dictates (normatively) the contents of the user-agent string. Various browsers and user agents have copied elements of other user agent strings for their own purposes to ensure that their user agent receives content. Indeed, the IE team is already on record as saying that the user-agent string for Windows 10 is designed to ensure the delivery of content, rather than the identification of the browser.

Because of this, reliance on the user-agent string is no longer considered a "good" practice, let alone a best one. This is only one reason why Microsoft's content has been advocating feature detection and other practices since the release of IE9. (Other resources have been deprecating the user-agent string for much longer.)

You haven't said why you need to differentiate one manufacturer's tablets and phones from another or what changes you hope to offer such differentiated devices. As a result, it's difficult (if not impossible) to recommend a more effective approach.

If you are trying to create an app that works only on these devices, then the web platform is probably not the one to use. If you're looking to provide content or functionality specific to these devices, the Windows Store platform (or the .NET framework) may be more appropriate. If you're looking for a way to exclude these devices from your offerings, then you may wish to consider an Android or iOS specific platform instead.

The web platform is meant, in part, to be device agnostic, to enable a consistent--and predictable--set of functionality across a wide set of devices, form factors, and operating systems.

Hope this helps...

-- Lance

Answer 3

OK so I think you created a diversion for some here, you are not trying to detect touch per se as much as you want to detect if a device is a tablet or desktop. As I stated earlier in my comment you should not use any user agent string to do feature detection, ever. Detect the features directly.

FWIW here is how I detect touch support in DeepTissue :

            this.touchType = window.navigator.pointerEnabled ? "pointer" :
                            "ontouchstart" in window ? "touch" : "mouse";

Notice how I detect pointer events first then fall back to other input modality APIs?

On to what I think the essence of your question really is, how can I design an interface that is optimized for legacy desktops and modern touch enabled devices? This is where you need to tap that artistic part of your mind and meld it with valuable UX research by folks like Jacob Nielson on what works and what does not work. As you have seen Microsoft, Google and Apple all struggle with this same question it is not easy to answer. My advice, based on lots of experience, is to create a simple, responsive UI and grow from that. Start mobile first and design up from there. Remember, if it works with fat fingers then it will work with a mouse pointer. Touch is a direct input modality, where a mouse in indirect, so the experience is slightly different.

Make all your data actionable. This means instead of a small touch target with an anchor wrapped around text make the anchor wrap around the product photo. Make sure there is enough padding within the anchor to make the touch targets easier to hit and make sure there are margins between adjacent targets to reduce errors.

This is not an easy question to answer with an exact science because each application has its own character or personality. Users vary, etc. But one thing is for sure touch is quickly replacing non-touch devices and you need to account for that in any application design.