mdn / mdn/content

Note difference in how Touch.screenX/screenY, Touch.clientX/clientY and Touch.pageX/pageY handle zooming

Open
#36,326 0 comments 0 reactions 0 assignees View on GitHub
area: UI Events Content:WebAPI help wanted
Dominant language
Markdown
Stars
11k
Forks
23.2k
Avg merge
2d 9h
Merged PRs (30d)
331

Description

### MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/Touch

### What specific section or headline is this issue about?

Instance properties

### What information was incorrect, unhelpful, or incomplete?

The descriptions of Touch.screenX/screenY, Touch.clientX/clientY and Touch.pageX/pageY make it seem like the only difference between them is the location of the coordinate origin.

### What did you expect to see?

In practice there is another important difference: If you zoom in using pinch zoom, then Touch.clientX/clientY and Touch.pageX/pageY will use the same pixel size that CSS uses (i.e. dragging over an element with `width: 1px` will always result in a change of 1 in the coordinates).
However, Touch.screenX/screenY uses the some kind of screen-space CSS pixels. If you have not zoomed in then 1 client/page pixel matches 1 screen pixel, but if you have zoomed in, then screen pixels will be smaller (i.e. dragging over an element with `width: 1px` will result in a change of more than 1 in the screen coordinates).

### Do you have any supporting links, references, or citations?

I tested the behavior on Chrome on Android. I do not know for sure if other mobile browsers have the same behavior and I could not find anything in the spec that actually requires this behavior.

### Do you have anything more you want to share?

_No response_

### MDN metadata

Page report details

* Folder: `en-us/web/api/touch`
* MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Touch
* GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/touch/index.md
* Last commit: https://github.com/mdn/content/commit/22080a7cc403f7f45c8e85065b182c9f0d4d383c
* Document last modified: 2024-07-26T15:28:56.000Z

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.