angryliner.blogg.se - Screeny javascript

#Screeny javascript full#

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.

#Screeny javascript full#

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). The visual viewport is the part of the page that's currently shown onscreen. For a better understanding - on mobile browsers - we need to differentiate two new concept: the layout viewport and visual viewport. Regarding your last question if calculations are similar on desktop and mobile browsers. The event point is where the user clicked and the reference point is a point in the upper left. screenX/Y gives the coordinates relative to the screen in device pixels. In JavaScript: pageX, pageY, screenX, screenY, clientX, and clientY returns a number which indicates the number of logical CSS pixels an event point is from the reference point.clientX/Y gives the coordinates relative to the viewport in CSS pixels.

pageX/Y gives the coordinates relative to the element in CSS pixels.

This point does not move even if the user moves a scrollbar from within the browser.įor a visual on which browsers support which properties: Relative to the upper left edge of the content area ( the viewport) of the browser window. Relative to the top left of the physical screen/monitor, this reference point only moves if you increase or decrease the number of monitors or the monitor resolution. This point could be anywhere in the browser window and can actually change location if there are embedded scrollable pages embedded within pages and the user moves a scrollbar. This reference point is below the URL bar and back button in the upper left. Relative to the top left of the fully rendered content area in the browser. These properties return the horizontal and vertical distance of the event point from that reference point. PageX, pageY, screenX, screenY, clientX, and clientY returns a number which indicates the number of logical “CSS pixels” an event point is from the reference point.