Как веб-сайты получают точные данные?

Есть такие услуги, как crazyegg.com, которые показывают вам, где посетители отдыхают на курсах мыши на вашей веб-странице. Мой вопрос заключается в том, что люди имеют разную ширину экрана, как они могут быть уверены, что моя координата x является той же позицией на странице, что и координаты других людей? Смысл, два человека могут иметь одинаковые координаты мыши, но поскольку экраны имеют разную ширину, их мышь будет находиться на другой части веб-страницы.

Как создать веб-страницу службы тепловой карты, которая учитывает это, и ее можно масштабировать и использовать на нескольких разных сайтах с разными размерами контента?

Ответ 1

Вы можете собирать данные x и y по элементу (как основной контент div), а не весь видовой экран. Таким образом, вы можете отказаться от мертвого пространства, которое зависит от пользовательского разрешения.

Ответ 2

Вы можете добавить обработчик кликов в тело или обертку div (лучше, когда ваше содержимое сосредоточено на экране с помощью margin: auto), которые содержат весь контент страницы. В MouseEvent передаются координаты screenX/Y и clientX/Y, где первые - координаты, начинающиеся в левом верхнем углу экрана, а остальные координаты основаны на верхнем/левом углу тела или обертки div. Использование координаты clientX/Y упростило создание карты тепла, вызвав одну и ту же начальную точку относительно вашего контента по разным размерам экрана.