窗口.仅适用于手持设备的定向检测

window.orientation detection for handheld only

本文关键字:检测 适用于 窗口      更新时间:2023-09-26

我在我的webapp上有以下代码,只在横向显示div。它在手机上效果很好,但在iPad上也很好,这是我不想要的。有没有办法让这个功能只在手持设备上工作?

$(function(){
window.onload = handleOrientation;
    window.addEventListener('orientationchange', handleOrientation, false);
        function handleOrientation() {
            if (window.orientation == "90" || window.orientation == "-90") {
            document.getElementById("landscape").style.display = 'block';
        } else {
            document.getElementById("landscape").style.display = 'none';
        }
    }
});

我是javascript的新手,多亏了你们,我能以最快的速度学习,但我不知道该怎么办。

您应该能够区分手机和平板电脑,然后对平板电脑禁用它。

区分的一种方法是找出屏幕宽度。

if (window.screen.width < 320) {
// This is an iphone
// 320 pixels is the width of an iphone
// do the necessary
}

这可能不是最好的方法,但可以修复

问题

您需要进行一些用户代理嗅探,因为仅通过检查屏幕大小/像素密度几乎不可能区分手机和平板电脑。甚至用户代理也不是100%可靠的。

你可以在这里找到一些灵感:http://detectmobilebrowsers.com/

如果你只关心iPad作为平板电脑。您可以检查浏览器的用户代理,并仅当侦听器是电话时才附加它。否则,请检查它是否是具有用户代理字符串的移动设备。

if (!navigator.userAgent.test(/iPad/i)) {
    // Attcah listener here
}

检查以下问题的答案,了解如何使用用户代理字符串进行检测。

如何检测Android平板电脑的一般情况。用户代理?