Display different HTML for Android and iOS

Question

I have a requirement to display different HTML based on whether the client accessing the portal is using an Android or iOS phone. I have tried to use the userAgent based detection: Redirect users to iTunes app store or google play store?

I then tried to use: $( document ).ready(function() { and an if statement to check if agent is iOS or Android and based on either, display div for iOS or div for Android. Any good way of doing that?

ANDROID SPECIFIC INSTRUCTIONS

<div id="android-quicklink">
<p>ANDROID SPECIFIC INSTRUCTIONS</p>
<p id="content-container"><a href="#" id="android-link" target="_new"><span class=“googleplay-icon"> </span></a></p>
</div>

<script>
    $( document ).ready(function() {
        if (getMobileOperatingSystem() == "Android") {
            $('#android-link').attr("href", "https://play.google.com/xxxxxxx");
            $(‘.googleplay-icon').toggleClass('googleplay-icon')
            $('#android-quicklink').toggle();
        }
    });
 </script>

score 0 · Answer 1 · answered Jan 24 '19 at 23:28

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile.html";
}
//-->
</script>
"mobile.html" would be replaced with the location of wherever your mobile version resides. This technique could be adapted to load an alternate stylesheet as well.

#For iPhones/iPods Specifically
<script language=javascript>
<!--
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
   location.replace("http://url-to-send-them/iphone.html");
}
-->
</script>

Hi, thanks for the example. However, that will load a different page. What I am intending to do is to have:
content specific to Android, text and graphics

content specific to iOS, text and graphics — Manny Solo, Jan 25 '19 at 00:14

Display different HTML for Android and iOS

1 Answers1