Mac端FireFox调用window.moveTo时弹窗位置仅为参数一半问题咨询

问题根因 #

这是Mac平台FireFox的已知兼容性问题，核心出在Retina高DPI屏幕的坐标单位换算逻辑和标准不一致：

• Chrome等主流浏览器处理moveTo方法时，传入参数为标准CSS像素，直接映射为屏幕逻辑坐标
• Mac版FireFox处理弹窗的moveTo、resizeTo等方法时，错误将传入的CSS像素值除以当前屏幕的设备像素比（devicePixelRatio，Retina屏通常为2）后再应用到窗口位置，因此出现坐标为传入值一半的现象

解决方案 #

不要用硬编码参数翻倍的hack，改用动态适配的兼容方案，风险极低且可适配不同dpr的设备：

1. 首先识别运行环境是否为Mac平台下的FireFox
2. 获取当前屏幕的设备像素比，对传入的坐标参数做动态换算后再调用原生moveTo方法

兼容代码示例 #

/**
 * 兼容Mac版FireFox的弹窗移动方法
 * @param {Window} popupWin 弹窗的window实例
 * @param {number} targetX 目标X坐标（CSS像素）
 * @param {number} targetY 目标Y坐标（CSS像素）
 */
function safeMovePopupTo(popupWin, targetX, targetY) {
  // 检测是否为Mac平台下的FireFox
  const isMacFirefox = /Macintosh.*Firefox/.test(navigator.userAgent)
  if (isMacFirefox) {
    const dpr = window.devicePixelRatio
    // 按设备像素比换算坐标
    targetX = Math.round(targetX * dpr)
    targetY = Math.round(targetY * dpr)
  }
  popupWin.moveTo(targetX, targetY)
}

使用示例 #

// 创建弹窗
const test = window.open('assets/test.html', 'test', 'width=200,height=200,top=0,left=0')
// 移动弹窗到x=300，y=0位置，自动适配Mac Firefox
safeMovePopupTo(test, 300, 0)

补充说明 #

• 该兼容逻辑仅在Mac版FireFox下生效，不会影响其他浏览器的正常行为
• 动态获取dpr的方案可适配不同密度的屏幕，即使后续出现dpr为3的Mac设备也无需修改代码
• 若需要更精准的适配，可在调用moveTo后读取popupWin.screenX做二次校验校准，进一步降低异常风险

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