如何定位 iPad 和 iPhone，但不包括 Android

Question

我一直在寻找这个答案，但似乎找不到。我只有 iPhone 和 iPad - 我没有 Android - 所以我不知道我的 CSS 是否会触及 Droid？

这是我的 HTML 和 CSS 中的内容：

HTML

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1.0">

CSS

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
... CSS for iPad landscape
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) { 
... CSS for iPad portrait
}

@media only screen and (max-device-width: 480px) { 
... CSS for iPhone portrait and landscape
}

问题：

1. Droid 是否有特定的元标记？
2. 上面的 CSS 是否针对 Droid？如果是这样，有没有办法可以修改它以便 Droid 忽略它？
3. 是否有适用于 Droid 的在线模拟器以便我进行故障排除？

您可以在此处查看示例页面：http://www2.receivablesxchange.com/alternative-to-factoring-4

Answer 1

媒体查询用于显示区域和类型。它不看用户代理或类似的东西。你可以用 JQuery + CSS 做这样的事情：

var _device = {};

if (navigator.userAgent.match(/iPad/i)) {
    _device.name = 'ipad';
    _device.type = 'mobile';
} else if (navigator.userAgent.match(/android/i)) {
    _device.name = 'android';
    _device.type = 'mobile';
} else {
    _device.type = 'desktop';
}

$('body').addClass(_device.name).addClass(_device.type);

现在，在您的 CSS 中，您只需添加符合您需求的 body 类：

@media only screen and (max-device-width: 1024px) { 
    .ipad #myDiv {
        // css for #myDiv only seen on the iPad
    }

    .android #myDiv {
        // css for #myDiv only seen on the Android
    }

    .mobile #myDiv {
        // css for #myDiv available to iPad AND android but NOT desktop
    }
}