I'm trying to make a Tumblr theme that will show one div if the user is on iOS (with an app store link) and one if they are on anything else (with another link). However, because of the way Tumblr works, I can't figure out why it won't work. I tried to use https://www.mattcromwell.com/detecting-mobile-devices-javascript/, which was written with Wordpress in mind, and I don't quite understand what I'm missing from tumblr.
<script type="text/javascript">
var isMobile = {
iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); },
any: function() { return (isMobile.iOS();} };
</script>
is what I have in the head tag. Then, I need the actual detection to happen in the footer, where I have
<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>
Maybe I have the other jQuery in the wrong place? I have also imported the jQuery library too. Hopefully someone can help me! When I do this, it never shows any div regardless of device (obviously since I have them hidden - and I do have a thing in css that does not show .hide classes).
Any ideas?
As @Shikkediel pointed out, there seems to be an issue with the iOS function.
I've made this fiddle. I also think maybe the condition needed to be inverted (at least now in the fiddle the div for desktop is showing on desktop, and the one for mobile only on mobile).
https://jsfiddle.net/lharby/fvau9vnz/
This is the code:
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');
}
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments