Best way to detect touch screen

Trying to find the most reliable method to detect if a user has a touch device. Is modernizr the way to go?

That’s what Foundation uses and seems to be fairly popular. I’d use it on my projects if it called for it.

Although do you want to see if users have a touch device, or just on small mobile screens? What are you trying to accomplish?

The users device may both be touch and keyboard - what will you do then :smile:

2 Likes

At the moment, just seeing what is possible - previously have tried to ignore small screens & touch!

My first experiment, i am including data-roles in the markup, then including jquery-mobile if screen-width < 370
Working ok so far - 3 column page on big screen, single column with collapsibles on mobile.

I wanted specifically to test for touch so I can use the href=tel facility without taking non-touch user to page not found - any advice please?

Just thought about my last question, it isn’t touch I need to detect is it? It’s ability to make a call.

My ipad automatically shows phone numbers as clickable (touchable?) but nothing happens on touching - that’s what i need, but for desktop users/browsers.

I believe that’s quite awkward as there is no way to reliably test for touch. Of course modernizr may be good enough for most cases but as stated in the article only detects for touch-events which may be present in non touch devices also.

I would be inclined not to use the href=tel method at all and rely on the mobile device detecting the number and adding the href dynamically as mobile safari does. This would avoid the issue of non-touch users clicking the link while still allowing modern mobile devices to do their own thing.

Alternatively you could use the href=tel mrthod and then set the cursor to default and the color to your normal text to make it look like its not a link for desktop users. Or perhaps also have a css popup on the link saying ‘Mobile only’ which would discourage users from clicking.

1 Like

Thanks Paul. I think you might be right; let the device work out what to do. Does that work for desktop users running skype?. Or, rather than detect touch, is there a way to know if the device is capable of making a call?

I have seen that link before, that’s why i decided not to bother with modernizr and try out jquery mobile instead - do you have any experience with that?

I am struggling to find real facts on any of this stuff - it all seems to be conflicting info, and I am not sure how much to trust any articles more than a few months old.

So far I have decided to believe:
-don’t trust user-agent
-telling the viewport not to scale in the meta tag works on all browsers/devices, and is generally a good start
-media queries work with all browsers/devices
-if designing a responsive site, start with the mobile version and add enhancements for larger screens - not the other way round
-there is no definite way to know if someone is using touch/mouse/keyboard, but you can get device width in pixels
Am I starting along the right lines?

Thanks

No don’t trust. Browser sniffing was never a good idea.

You want this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

(You don’t want to stop the user scaling text so don’t set user-scale to no.)

Without the viewport meta tag media queries won;t work as you expect on small devices because they will assume the design is 980px and scale to fit.

They don’t work in IE8 and below (and some other old devices). You can add a poyfill for IE8 using respond.js if you need to support it.

It’s six of one and half a dozen of the other. It used to be the case that you went with mobile first which meant designing a one column site for all devices and then progressively enhancing it with media queries for more modern devices. However, in those days that approach left IE8 with a one column site at a time when its usage was quite large so many people preferred to do it the other way around. These days IE8 is a minor browser so its not really an issue.

I prefer to start with the desktop site anyway (because that’s the design I am given by the client) and then I adapt it for smaller screens using max-width media queries.

In the end it all depends on what suits you best.

There doesn’t seem to be any reliable way to detect touch and indeed some users may use all of the above at the same time. For most normal sites this isn’t an issue unless you are specifically developing an app for mobile users. Most sites don’t need to know whether the user is touching or clicking and as long as you haven’t made extensive use of hover effects the site will still work.

Don’t quote me but I seem to remember skype changing telephone numbers into clickable links.

Jquery mobile is for building mobile specific sites and generally you would not use it in a responsive site where you are catering for desktop and mobile.

I suppose the question is what type of site are you designing and what features do you need.?

Thanks, that’s really helpful.
At the moment I am just experimenting on a small static site. Ultimately, what I want to do is make my own ecommerce site a lot more usable on small screens. It is currently a fixed 990px wide with a big centre column and a smaller one either side.
I think I need a complete redesign for mobile (take out all the big advertising graphics, simplify the menus, etc).
Not sure how to deal with the smaller tablets tho (like ipad mini) - where the optimum viewport would be 768, but it will resize to 1024.
Either I just enlarge font/buttons so they are still usable (and let the device adapt to 1024), or do I try and make it responsive, so it stays within the 768?
Can i even tell if a device is capable of 1024 resolution? And what to do about those weird in-between sizes - 480 to 640, do I assume they are mobiles?
I’m having trouble working out what I want to do, never mind achieving it!
Do you have particular ‘cut-off sizes’ that determine the layout?

I don’t concern myself with device sizes at all apart from the smallest (assume 320px these says). I create responsive websites that are device agnostic. I believe there are about a 1000 different devices now all with different resolutions and capabilities so device chasing is a non starter.

I create ‘design-centric’ sites where it is the design that dictates where the media query should be applied. Basically, I open and close the browser width from 320px up to its maximum and if at any point during that process the design looks awkward or doesn’t fit then I throw in a media query and fix it. With a fluid site and a few well chosen media queries you magically cater for all device sizes no matter what they are.

It doesn’t need to be any more complicated than that. :slight_smile:

The process usually entails going down to one column for the smaller widths but only when the design needs it and not because I think there’s a device lurking at that size. Forget devices - just code for screen widths and make sure your design firs across the whole range.

You make it sound so simple!

I’ll stop worrying about the multitude of devices out there. Instead I’ll concentrate on making my fixed-width site a bit more fluid and see how it looks at various resolutions.

You have been a big help. Thanks.

Yes that’s a good first step:)

It can be a little awkward at first if you are used to fixed widths but it soon falls into place. Sometimes you may need to adjust the html if something just doesn’t work but that’s where planning ahead comes in useful.

Hi Paul. I’ve just published my 1st responsive site. A single page, but with a few fancy plugins (that seem to work ok with touch/swipe). I think it works at all screen widths, and it uses jquery mobile for < 370px for a ‘proper’ mobile site. Would you mind taking a quick look to see what I could have done better?
I am not supposed to post links on here am I? But if you google ‘will clift contracting’, it should be the first non-facebook result.
Thanks

Hi assuming this is your site http://www.willcliftcontracting(dot)co(dot)uk/.

It looks pretty good but the first thing I notice is that the facebook in the middle column is too wide for an ipad in portrait mode and slides over the right column.

You would have been better off going down to two columns for narrower screens as three squashed columns are a little awkward. Otherwise you may need to add overflow:hidden to the parent of that column and try to cut it off on the ipad. I’m not sure why its showing but iframes can be awkward on smaller devices.

The other thing I notice is that you have detected mobile specifically and offered a different layout which is fine except that desktop users on small screens don’t get the same benefit. I often have three or four windows open at about 400px wide and I just get squashed columns.

I would have preferred that desktop at small widths get the same mobile view so that is usable no matter where you are.

All in all though it looks pretty good but I would look at tweaking those three columns into two columns earlier and down to one column for smaller windows.:slight_smile:

Thanks ever so much. I’ve tweaked it a bit.
It jumps to 2 columns at < 800px (reasoning - ipad is 789, maybe old desktops still at 800?)
with:

@media screen and (max-width: 799px) {
   .para {
         width:45%;
     }
}

and to 1 column at 645px (just looked right)

To get the ‘mobile’ site on a resized browser window I had to replace max-device-width with max-width in:

<link media="only screen and (max-width: 370px)" rel="stylesheet" 
href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css"/>

for the mobile css
and the javascript was using screen.width so that wasn’t getting called either
I’ve replaced it with window.innerWidth in

if (window.innerWidth <= 370) {
  document.write('<script type="text/javascript" 
src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"><\/script>');
}

which seems to work

A couple of issues - if you land on the page with < 370px you get the ‘mobile’ site, but if you resize to non-mobile it leaves the extra collapsible code (click to expand contents) on my section headings . And vice versa, if you open it in large window, then shrink it, the styling takes effect, but not the collapsibles. I’m assuming I need an event listener for resizing the window below/above 370px? and then do something…

Thanks for the feedback.

EDIT
This post has been reformatted by enclosing the code block in 3 backticks
```
on their own lines.

oops, should have quoted that code…

anyway, the issues left are
if you land on the page at < 370px you get the mobile version, but on resizing it leaves the collapsible code (click to expand) on my section headings
if you land with a large browser and shrink it, the mobile styling gets applied, but not the collapsibles
I assume i need to add an event listener for window resizing to sort that out?

Thanks so much for your feedback.

I’m not sure why you are using js for the mobile site as the css site would have been fine. Using jquery mobile is best for apps or dedicated mobile sites rather than responsive sites or perhaps if you have multiple sliders/plugons that are not working on mobile.

In most cases the desktop site will work on the mobile site without the need for the extra library as long as you use mobile friendly plugins for sliders and things.

Regarding the collapsible code then again you can hide that with css:

e.g.

@media screen and (min-width:371px){
.ui-collapsible-heading-status {display:none!important}
}

Of course you may have to restyle the element again as your styles will still be applying.
As I mentioned earlier the simpler you keep things the better and I would not have used any mobile jquery or device-width rules but just simple css and media queries for all. :smile:

However, don’t let that stop you experimenting as rules are there to be broken if it fits in with your vision.

So you wouldn’t bother with things like collapsibles, slide-in menus and whatever else jquery.mobile does? You would write your own css as needed?

CSS can do a majority (if not all) of what jquery mobile does. For what it doesn’t, then you can sprinkle some Javascript in there.

I’m sure it CAN do it - in the right hands!
I’m ‘ok’ with CSS, but it would take me an age to emulate some of what jquery mobile can do. What is the advantage of avoiding it?