我一直在寻找这个答案,但似乎找不到。我只有 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
}
问题:
- Droid 是否有特定的元标记?
- 我上面的 CSS 是否解决了 Droid 的问题?如果是这样,是否可以修改它以便 Droid 忽略它?
- 是否有适用于 Droid 的在线模拟器,以便我进行故障排除?
您可以在此处查看示例页面:http://www2.receivablesxchange.com/alternative-to-factoring-4
最佳答案
媒体查询是针对显示区域和类型的。它不查看用户代理或类似的东西。你可以用 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
}
}
关于android - 如何定位 iPad 和 iPhone,但排除 Android,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9984266/