What is the difference between screenX/Y, clientX/Y and pageX/Y?

Question

What is the difference between screenX/Y, clientX/Y and pageX/Y?

Also for iPad Safari,

Answer 1

1. pageX/Y gives the coordinates relative to the element in CSS pixels.
2. clientX/Y gives the coordinates relative to the viewport in CSS pixels.
3. screenX/Y gives the coordinates relative to the screen in device pixels.

Regarding your last question if calculations are similar on desktop and mobile browsers... For a better understanding - on mobile browsers - we need to differentiate two new concept: the layout viewport and visual viewport. The visual viewport is the part of the page that's currently shown onscreen. The layout viewport is synonym for a full page rendered on a desktop browser (with all the elements that are not visible on the current viewport).

On mobile browsers the pageX and pageY are still relative to the page in CSS pixels so you can obtain the mouse coordinates relative to the document page. On the other hand clientX and clientY define the mouse coordinates in relation to the visual viewport.

There is another stackoverflow thread here regarding the differences between the visual viewport and layout viewport : Difference between visual viewport and layout viewport?

Another good resource: http://www.quirksmode.org/mobile/viewports2.html