Simple Android versus iOS detection in WordPress theme

Question

I am trying to edit my WordPress theme file to show one ad code if an Android device is detected, another set of code if iOS.

The code is in the format:

<script type="text/javascript" src="//xxxxxxxx.js"></script>

I have tried several previous answers, such as the following:

All of which are slightly different and cause my page to not load (blank page).

Could someone please give me a hand and post the full simplest/fastest code to simply detect Android versus iOS and do nothing for anything else (i.e. a Windows PC). Something I can just copy and paste into the theme files where I want it.

Edit: I also tried things like the following to no avail (this was exactly what I pasted into the WordPress theme file, without the xxx and including proper reference to external .js file:

<?php var isAndroid = /(android)/i.test(navigator.userAgent);
if (isAndroid) {?>
<script type="text/javascript" src="xxxxxxx.js"></script>
<?php } ?>

and

<?php function getMobileOperatingSystem() {
  var userAgent = navigator.userAgent || navigator.vendor || window.opera;
  if( userAgent.match( /Android/i ) )
  {?>
    <script type="text/javascript" src="//xxxxxxx.js"></script>
  <?php}
} ?>

Have you tried this link: http://stackoverflow.com/questions/12606245/detect-if-browser-is-running-on-an-android-or-ios-device ? Just copy and paste that code into your javascript file, then use isMobile.iOS() and isMobile.Android() — Vineet Kosaraju, Jun 23 '15 at 19:54
Sorry I can't edit the javascript file directly. It's hosted externally. — Matt, Jun 23 '15 at 19:57

score 1 · Accepted Answer · edited May 23 '17 at 12:14

[EDIT]

Try changing your code to the below snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>

function isAndroid() { 
  return /Android/i.test(navigator.userAgent); 
} 
function isIOS() { 
  return /iPhone|iPad|iPod/i.test(navigator.userAgent); 
} 

if(isAndroid()) { $.getScript("//cdn.bounce.bar/xxxx.js"); } 

</script>

The reason what you tried above doesn't work is because you are trying to put javascript code into a PHP function when the interpreter is looking for PHP code.

If you have direct access to the HTML page, then you could do something like the following. This code is taken almost directly from Detect if browser is running on an Android or iOS device.

<script>
    function isAndroid() { return /Android/i.test(navigator.userAgent); }
    function isIOS() { return /iPhone|iPad|iPod/i.test(navigator.userAgent); }
</script>

Remember that PHP code is generally server side and javascript code is generally client side. I would try to load the script using Javascript depending on the OS type. Something like this might work if you are using Jquery:

<script>
    if(isAndroid()) {
        $.getScript("//xxxxxxx.js");
    }
</script>

I'm still not exactly sure what you are trying to do, but let me know if this doesn't work and provide more details, and I'll try to help out.

Hi @Bucco, thank you very much for this. I think we are getting close, I am connecting some dots. Now the page will load OK, but the code is not being run/the ad not being shown. This is what I have `` — Matt, Jun 23 '15 at 20:22
@Matt I've updated my post, see if it works now? You should separate the two scripts - the first one imports jQuery and the second one runs your operating system detector script. — Vineet Kosaraju, Jun 23 '15 at 20:27
This is a good reference: http://stackoverflow.com/questions/29414053/run-javascript-inside-script-src-script-tags the external javascript and your javascript must be seperated. — Vineet Kosaraju, Jun 23 '15 at 20:28

score 1 · Answer 2 · answered Jun 23 '15 at 20:18

1

You could do this

if(/Android/i.test(navigator.userAgent) ) { .............. } else if(/iPhone/iPad/i.test(navigator.userAgent) ){}

answered Jun 23 '15 at 20:18

iblancasa

324
1
5

Thank you, this is helpful too for when I add the iOS component. – Matt Jun 24 '15 at 06:59
` ` – Matt Jun 24 '15 at 09:25

Simple Android versus iOS detection in WordPress theme

2 Answers2