Question

我有一个可以检测iPhone / iPad和Android设备的脚本，但是单挑桌面/笔记本电脑设备时遇到了麻烦。在iPhone / iPad上查看页面时，它会触发＆＃34; iDevice＆＃34;首先，然后提醒＆＃34;桌面＆＃34;。我需要能够根据用户查看页面的平台（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

Answer 1

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

尽管如此，如果您仍然希望继续显示基于设备的内容，我可以看到的一个明显问题是您的if (navigator.platform === 'iPhone' || 'iPad'){}语句不正确：

'iPad'解析为truthy if。

您需要使用复合if ((navigator.platform === 'iPhone') || ((navigator.platform === 'iPad')){}语句，如：

if

这适用于所有其他regex.test()语句。

另一种方法是使用userAgent，就像在另一个问题中所做的那样：Detect if device is iOS。

此外，尝试浏览$translatePartialLoader.addPart("main"); $translatePartialLoader.addPart("common"); $translatePartialLoader.addPart("b/main"); $translatePartialLoader.addPart("a/common");字符串的混乱会让你发疯。考虑阅读WebAim的History of the browser user-agent string以了解原因。我的意思是，除非您喜欢处理Microsoft Internet Explorer提供的所有不同用户代理字符串，以欺骗服务器认为它实际上不是IE。

Answer 2

我重写了我的逻辑，并能够将表单与以下{！1}}和navigator.platform的混合分开：

navigator.userAgent

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

2 个答案: