iOS系统浏览器下点击事件screenY与pageY取值相同问题求助

问题产生原因 #

iOS平台所有的浏览器（包括Safari、Edge、Chrome等）均强制使用WebKit内核渲染，这是WebKit内核在iOS端的长期已知实现问题：为了适配系统自带的地址栏、状态栏自动隐藏/展开的交互逻辑，点击事件的screenY属性没有按照W3C标准返回相对于物理屏幕顶部的坐标，而是直接复用了pageY的数值，因此会出现两者完全一致的异常现象，该问题与业务代码逻辑无关。

兼容处理方案 #

• 方案1：若业务只需要获取点击位置相对于浏览器视口的坐标，直接使用e.clientY即可，该属性在iOS WebKit上的实现符合标准，不受页面滚动、浏览器控件隐藏状态的影响。
• 方案2：若确实需要获取相对于物理屏幕的绝对screenY值，可通过计算得到准确值：

document.addEventListener('click', e => {
    const isIOS = /iPhone|iPad|iPod/.test(navigator.userAgent) && !window.MSStream;
    const realScreenY = isIOS ? e.clientY + window.screenY : e.screenY;
    console.log('screenY:', realScreenY, 'pageY:', e.pageY);
});

• 方案3：若场景支持触摸事件，可替换为监听touchstart事件，iOS WebKit对触摸事件的screenY实现是正常的，可直接读取e.touches[0].screenY使用：

document.addEventListener('touchstart', e => {
    const screenY = e.touches[0].screenY;
    console.log(screenY, e.touches[0].pageY);
});

内容的提问来源于stack exchange，提问作者atomm