What is the difference between Media Query Pointer and Any-Pointer?

Asked

Viewed 194 times

10

I was seeing a way to determine if the user access is done by a Desktop, usually having a mouse as an interaction device. Or if the user is accessing via a mobile device, usually without the mouse to interact with the screen.

Then I saw that there is the possibility to treat it with the rules @media (pointer: X) or @media (any-pointer: X) where in pointer: X you define whether or not there is a mouse.

X can be:

  • none: No pointing device is available.
  • coarse: At least one input mechanism includes a limited precision pointing device.
  • fine: At least one input mechanism includes a precise pointing device.

Doubts

The question is that so much for pointer how much any-pointer the values are equal and represent the same thing, so what is the difference between one and the other?

Is there any way to recognize, by CSS, if the access is being by a device mobile (that does not have a mouse as input device) and apply a specific style sheet?

html5 css3 media-queries
  • 1

    The pointertakes into account the main input mechanism. any-pointer no. Vacê can read about them in the links below: inter any-Pointer I believe that’s it, I hope I helped.

1 answer

1

The difference between one and the other is that the inter will test only the primary pointing device (Primary Pointing device), as long as the any-Pointer will test anyone who has available and enter the media query appropriate (fine or coarse).

In the case of value none, whatever use pointer or any-pointer, already that you will both take on none if there is no pointing device.

To illustrate, let’s imagine some situations:

The term coarsand mean in the sense of bad, inferior quality. In this case, it would be low precision.

Prime scorer: touch

  • pointer: coarse
  • any-pointer: coarse

Prime scorer: touch
Secondary scorer: mouse

  • pointer: coarse
  • any-pointer: fine (because of the mouse)

Prime scorer: mouse
Secondary scorer: touch

  • pointer: fine
  • any-pointer: fine

Prime scorer: touchpad

  • pointer: fine
  • any-pointer: fine

Prime scorer: mouse
Secondary scorer: touchpad

  • pointer: fine
  • any-pointer: fine

Prime scorer: touchpad
Secondary scorer: mouse

  • pointer: fine
  • any-pointer: fine

See that both the mouse as to the touchpad are considered high precision pointing devices. Already the touch is considered coarse (low-precision). Other devices like trackball and those buttons in the middle of the keyboard on old notebooks that move the cursor I can’t tell if they are fine or coarse because I don’t have them to test, but I suppose both are fine also by moving the pointer on the screen, as does the mouse and touchpad. I don’t think the CSS will know the difference at the hardware level.

In short, it is more advantage to use any-pointer because it will fetch the best pointing device, idependemente whether it is the main one or not. But nowadays, this feature only serves to check whether the device used is touch (and change element properties for ease of use) or use an on-screen cursor.

In short, usually a mobile device will go into coarse, while a desktop will enter fine (if there is a mouse installed. Otherwise it will enter none).

  • Thanks a lot, Sam. What about determining CSS styles only for the mobile device based on the type of input device if eh fine, None, etc. Can you tell me if eh possible?

  • 1

    In mobile will always be coarse because of the touch. Unless the guy uses some kind of app that puts a pointer on the screen. But tb not know if even with the pointer on the screen will fall on fine. It has a mobile browser that emulates a mouse. I’ll test with it and tell you.

  • 1

    That’s what it was. Puffin Web browser mobile fine because it comes with a native mouse emulator. Already on Chome mobile falls on coarse.

  • So with this technique we can not define if the access is mobile or desktop, because both are fine or Coarse?

  • 1

    Generally mobile is Oarse (touch) and desktop fine (mouse). Except if the guy accesses through Puffin, he’s going to be fine because he’s got a built-in mouse simulator.

  • Yes it was worth the hint

Show 1 more comment

Browser other questions tagged html5 css3 media-queries

You are not signed in. Login or sign up in order to post.