Activate magnifier only on screens that are not touch sensitive

Hi like to use a magnifier to zoom in on images, but I don’t want this option to be available on touch screen devices. How would I disable the magnifier option on touch screen devices.

You’d probably want Javascript to detect that and add a class to the body element, and if body.touch or something is present, then don’t add the magnifying component. I would not rely on CSS to determine this.

1 Like

These articles may be of use:


I know Paul knows this, but I’d be wary of support if you do CSS only. Not everything in those articles are widely supported.

1 Like

There’s quite large support for the basic properties but the issues are much the same as detecting touch with JS anyway.

Even with JS you don’t know if this is the primary mechanism or not. For example some laptops and desktops have touch , keyboard, mouse and other pointers.

There’s not an easy answer which is why I prefer to use methods that work for touch and mouse rather than trying to stop one or the other. Avoid using css hover for important actions or replicate the effect with some JS for touch.

As usual nothing is straight forward unless you keep it really simple :slight_smile:


Yes, but you have capability to determine if a user mouses over something with a mouse, or taps onto something with a touch device. You can have more nuance in your code. CSS just can’t match that. I agree the issues are the same, but Javascript has the power to give a solution.

1 Like

I don’t think its as easy as that. :wink: There is still no reliable way to detect with JS if the device’s primary mechanism is mouse or touch or both.

However the new CSS media query features can do that and more.

You are right about full browser support for the time being but the future will be CSS once all the detail are ironed out.:slight_smile:

However I think we are basically on the same page and my suggestion was to make the application work for all which would mean using JS for both hover and touch for the time being. The danger of disabling the action for touch using JS means that all the tablets and desktops that are touch enabled will lose the function.

For the time being its bit of a messy situation which is why I would prefer methods that don’t rely on hover. :wink:

I wasn’t saying we could do that. I was saying we could detect which one the user uses in the heat of the moment :slight_smile: .For example, on a megamenu, I want it to open up on hover with a mouse, and on a touchpad, there needs to be a doubletap mechanism in place. You can determine whether the user tapped on the level 1 link with a touchpad or their mouse. It’s more dynamic.

Edit - re-reading this a couple hours later, I did not mean to say “touchpad”. I meant using the “touchscreen” (f.e. using your fingers to tap a level1 link on a meganav)