在 javascript 中检测非移动设备的问题答案

【问题标题】：Issue detecting non-mobile device in javascript在 javascript 中检测非移动设备的问题
【发布时间】：2015-12-12 06:46:19
【问题描述】：

我有一个可以检测 iPhone/iPad 和 Android 设备的脚本，但无法识别台式机/笔记本电脑设备。在 iPhone/iPad 上查看页面时，它首先触发“iDevice”警报，然后触发“Desktop”警报。我需要能够根据用户查看页面的平台（iPhone/iPad、Android、Windows Phone、台式机/笔记本电脑（非移动设备））显示不同的表单。我不是在尝试以分辨率为目标，而是在尝试以 PLATFORM 为目标。

HTML

<div class="iDevice">iDevice</div>
<div class="android-view">Android Device</div>
<div class="desktop">Desktop</div>

Javascript

    $("#email").hide();
$(".desktop").hide();
$(".iDevice").hide();
$(".android-device").hide();
$('#checkbox').change(function () {
    $('#email').slideToggle();
});

if((navigator.platform === 'iPhone') || (navigator.platform === 'iPad')){
alert("iDevice");
    $(".iDevice").show();
    $(".android-view").hide();
    $(".desktop").hide();
}

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
alert("Android");
    $(".iDevice").hide();
    $(".android-view").show();
    $(".desktop").hide();
}

else if ((navigator.platform != 'iPhone') || (navigator.platform != 'iPad' ) || (isAndroid === false)){
alert("Desktop");
    $(".desktop").show();
    $(".iDevice").hide();
    $(".android-view").hide();
}

JSFIDDLE：LINK

【问题讨论】：

您是否试图告诉用户他们使用的是什么手机，或者因为功能支持而对不同的设备使用特定的 JavaScript 操作？如果是后者，我会说你应该使用 has.js 或 Modernizr 之类的东西来进行特征检测。此外，基于设备隐藏和显示大块页面也是愚蠢的。你应该尝试使用 CSS 之类的 Responsive Design。
如今，将设备归为特定类别确实是愚蠢的，因为这是一个完整的连续体。手机和平板电脑的分界线在哪里？平板电脑和笔记本电脑的分界线在哪里？空无一人。您可以购买可以是平板电脑的笔记本电脑，也可以购买可以是笔记本电脑的平板电脑。相反，请查看平台具有的功能（屏幕尺寸、触摸等...）并仅根据这些功能调整您的 UI。无论设备属于哪个类别，他们都可以提供可用的 UI。
还有，是什么让某些东西无法移动？您是否会以某种方式检测到设备没有电池或没有无线网络，因为现在几乎所有其他东西都以某种方式移动。
我的问题的解决方案比这简单得多，@jfriend00。这个想法是用户将根据他们所使用的设备看到不同的表单。它与使设备成为设备的概念无关。它只是“如果此设备在 iOS 上，则显示此表单”，如果此设备是 Android 平台，则显示此表单“，如果用户在台式机/笔记本电脑上，则显示此表单”。我的脚本适用于 iPhone/iPad 和 Android，但在挑选非 android/iOS 设备时遇到问题。我试着说如果设备都不是这些，那么就显示这个。
@Matt - 但是，如果它是笔记本电脑、平板电脑和大手机，为什么要显示不同的形式？这种愿望从一开始就是愚蠢的。

标签： javascript navigator

【解决方案1】：

除非您特别需要在设备上直接显示内容，否则您应该练习Responsive Design。我们的想法是使用CSS 和Media Queries 为您的内容设置不同的屏幕尺寸、布局或其他样式。此外，如果您需要让您的 JavaScript 根据 API 可用性执行不同的操作，您应该使用 Feature Detection 库，例如 has.js 或 Modernizr。

话虽如此，如果您仍想追求基于设备显示内容，我可以看到的一个明显问题是您的if 语句不正确：

if (navigator.platform === 'iPhone' || 'iPad'){} 解析为'iPad'，即truthy。

您需要使用复合 if 语句，例如：

if ((navigator.platform === 'iPhone') || ((navigator.platform === 'iPad')){}

这也适用于您的所有其他 if 语句。

另一种选择是使用regex.test()，就像在另一个问题中所做的那样：Detect if device is iOS。

此外，试图浏览userAgent 字符串的混乱会让你发疯。考虑阅读 WebAim 的 History of the browser user-agent string 以了解原因。我的意思是，除非你喜欢对 Microsoft Internet Explorer 提供的所有不同的用户代理字符串进行粗暴处理，以诱使服务器认为它实际上不是 IE。

【讨论】：

我已经更新了我的代码，但现在 iPhone/iPad 正在点击 iDevice 然后是桌面，因为我看到了 iDevice 然后是桌面的警报。 jsfiddle.net/mattography/86e48ebn
@Matt 您能否编辑您的问题并包含navigator.platform 和navigator.userAgent 的值，这些值适用于您要定位的每个设备？我无法访问所有这些，这意味着帮助您调试这很困难。

【解决方案2】：

我重新设计了我的逻辑，并能够使用以下目标navigator.platform 和navigator.userAgent 的组合来分隔表单：

$("#email").hide();
$(".iDevice").hide();
$(".android-device").hide();
$('#checkbox').change(function () {
    $('#email').slideToggle();
});

//IF WINDOWS PHONE
if(navigator.userAgent.match("MSIE")){
    $(".iDevice").hide();
    $(".android-view").show();
    $(".desktop").hide();
}

//ELSE IF iPhone/iPad
else if((navigator.platform === 'iPhone') || (navigator.platform === 'iPad')){
    $(".iDevice").show();
    $(".android-view").hide();
    $(".desktop").hide();
}

//ELSE IF DESKTOP (NOT iPhone/iPad/Android/Windows Phone)
else if ((!navigator.userAgent.match("MSIE")) || (navigator.platform !== 'iPhone' || 'iPad' ) && isAndroid === false){
    $(".desktop").show();
    $(".iDevice").hide();
    $(".android-view").hide();
}

//IF IS ANDROID
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
    $(".iDevice").hide();
    $(".android-view").show();
    $(".desktop").hide();
}

【讨论】：