Android横屏模式下Web应用设备方向校准问题求助

问题描述 #

我正尝试在Web应用中获取正确的设备方向。在iOS设备上，event.webkitCompassHeading运行良好，但在Android设备上，该属性要么为undefined，要么返回NaN。

经搜索后，我找到如下代码片段：

headingMio = Math.round(roundedAlpha + 85) % 360;
if (headingMio < 0) {
    headingMio += 360; 
}

但这段代码在横屏模式下无法正常工作，请问该如何修复？以下是我的完整代码：

let lastHeading = null;
let threshold = 5;
let threshold2 = 15;

document.addEventListener('click', async function requestOrientationPermission() {
    if (typeof DeviceOrientationEvent.requestPermission === 'function') {
        try {
            const permissionState = await DeviceOrientationEvent.requestPermission();
            if (permissionState === 'granted') {
                console.log("已获取设备方向权限。");
                // 添加设备方向事件监听
                window.addEventListener('deviceorientation', handleDeviceOrientation);
                document.removeEventListener('click', requestOrientationPermission);
            } else {
                console.log("设备方向权限被拒绝。");
            }
        } catch (error) {
            console.error('请求权限时出错:', error);
        }
    } else {
        window.addEventListener('deviceorientation', handleDeviceOrientation);
    }
});

// 处理设备方向数据的函数
function handleDeviceOrientation(event) {
    roundedAlpha = Math.round(360 - event.alpha);
    roundedBeta = Math.round(event.beta);
    roundedGamma = Math.round(event.gamma);

    headingMio = Math.round(event.webkitCompassHeading);

    if (headingMio === undefined || isNaN(headingMio)) {
        if (roundedBeta > 80 && roundedBeta < 105) {
           // 横屏模式下无法正常工作
        } else {
            headingMio = Math.round(roundedAlpha + 85) % 360;
            if (headingMio < 0) {
                headingMio += 360; 
            }
        }
    }

    const c = document.getElementById("orientation");

    if (lastHeading === null || Math.abs(headingMio - lastHeading) > threshold) {
        lastHeading = headingMio;

        c.innerText = `Alpha (Z轴): ${roundedAlpha}, Beta (X轴 - 前后倾斜): ${roundedBeta}, Gamma (Y轴 - 左右倾斜): ${roundedGamma}, 磁北方向 (罗盘角度): ${headingMio}`;

        if (!isNaN(headingMio)) {
            map.setHeading(parseInt(headingMio, 10));
        }
    }

    c.innerText = `Alpha (Z轴): ${roundedAlpha}, Beta (X轴 - 前后倾斜): ${roundedBeta}, Gamma (Y轴 - 左右倾斜): ${roundedGamma}, 磁北方向 (罗盘角度): ${headingMio}`;

}

解决方案 #

问题出在Android设备的坐标系差异：alpha值基于设备自身物理坐标系，横屏时屏幕显示方向与设备物理方向不一致，需根据横屏状态调整罗盘角度计算逻辑。

修改handleDeviceOrientation函数中的Android兼容部分，加入屏幕方向判断：

function handleDeviceOrientation(event) {
    let roundedAlpha = Math.round(360 - event.alpha);
    let roundedBeta = Math.round(event.beta);
    let roundedGamma = Math.round(event.gamma);
    let headingMio = Math.round(event.webkitCompassHeading);

    // 处理Android设备的罗盘计算
    if (headingMio === undefined || isNaN(headingMio)) {
        // 通过gamma值区分左横屏/右横屏
        const isLandscapeLeft = roundedGamma < -90;
        const isLandscapeRight = roundedGamma > 90;

        if (roundedBeta > 80 && roundedBeta < 105) {
            // 设备平躺时罗盘数据不可靠，标记为无效
            headingMio = NaN;
        } else if (isLandscapeLeft) {
            // 左横屏模式下修正角度
            headingMio = Math.round((roundedAlpha + 85 + 90) % 360);
        } else if (isLandscapeRight) {
            // 右横屏模式下修正角度
            headingMio = Math.round((roundedAlpha + 85 - 90) % 360);
        } else {
            // 竖屏模式下原逻辑
            headingMio = Math.round((roundedAlpha + 85) % 360);
        }

        // 确保角度在0-360范围内
        if (headingMio < 0) {
            headingMio += 360;
        }
    }

    const c = document.getElementById("orientation");

    if (lastHeading === null || Math.abs(headingMio - lastHeading) > threshold) {
        lastHeading = headingMio;
        c.innerText = `Alpha (Z轴): ${roundedAlpha}, Beta (X轴 - 前后倾斜): ${roundedBeta}, Gamma (Y轴 - 左右倾斜): ${roundedGamma}, 磁北方向 (罗盘角度): ${headingMio}`;

        if (!isNaN(headingMio)) {
            map.setHeading(parseInt(headingMio, 10));
        }
    }

    c.innerText = `Alpha (Z轴): ${roundedAlpha}, Beta (X轴 - 前后倾斜): ${roundedBeta}, Gamma (Y轴 - 左右倾斜): ${roundedGamma}, 磁北方向 (罗盘角度): ${headingMio}`;
}

关键调整说明 #

• 横屏判断：通过gamma值判断设备是左横屏（gamma < -90）还是右横屏（gamma > 90），Android设备横屏时gamma值会接近±90度。
• 角度修正：左横屏时给计算结果加90度，右横屏时减90度，抵消屏幕旋转带来的坐标系偏移。
• 边界处理：保持角度始终在0-360范围内，避免出现负数角度。

额外提示 #

• 部分Android设备的alpha值基准不同，若罗盘角度有偏差，可调整+85这个偏移值（比如改成+90）校准。
• 设备平躺（beta接近90度）时罗盘数据本身不可靠，可设置headingMio为NaN并提示用户调整设备姿态。

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