我正在尝试制作一个 Tumblr 主题,如果用户使用 iOS(带有应用商店链接)则显示一个 div,如果用户使用其他任何东西(带有另一个链接)则显示一个 div。但是,由于 Tumblr 的工作方式,我不明白为什么它不起作用。我尝试使用 https://www.mattcromwell.com/detecting-mobile-devices-javascript/ ,这是用 Wordpress 编写的,我不太明白我从 tumblr 中遗漏了什么。
<script type="text/javascript">
var isMobile = {
iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); },
any: function() { return (isMobile.iOS();} };
</script>
是我在 head 标签中的内容。然后,我需要在页脚中进行实际检测
<p id="is-mobile" class="hide">This is a Mobile Device</p>
<p id="is-desktop" class="hide">This is NOT a Mobile Device</p>
<script type="text/javascript">
jQuery(function($) {
if (!isMobile.iOS())
$('#is-mobile').addClass('show');
if (isMobile.iOS())
$('#is-desktop').addClass('show');
});
</script>
也许我把另一个 jQuery 放在了错误的地方?我也导入了 jQuery 库。希望有人能帮助我!当我这样做时,无论设备如何,它都不会显示任何 div(很明显,因为我将它们隐藏了 - 而且我在 css 中确实有一个不显示 .hide 类的东西)。
有什么想法吗?
最佳答案
正如@Shikkediel 所指出的,iOS 功能似乎存在问题。
我制作了这个 fiddle 。我还认为可能需要反转条件(至少现在在 fiddle 中桌面的 div 显示在桌面上,而移动的 div 仅在移动设备上显示)。
https://jsfiddle.net/lharby/fvau9vnz/
这是代码:
var isMobile = {
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i)
},
any: function() {
return (isMobile.iOS())
}
};
jQuery(function($) {
if (isMobile.iOS()){ // we should only need an if/else here now. Changed from !isMobile.iOS();
$('#is-mobile').addClass('show');
}else{
$('#is-desktop').addClass('show');
}
});
关于javascript - Tumblr 上的移动设备检测,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33682997/