Search code examples
javascriptandroidioshideuser-agent

I want to hide element on android phone and show it on iOS

I want to display some content on android, and hide it on iOS. And of course also the other way around.

I use this code, but I can't make it work :(

<script type="text/javascript">
var OSName="Unknown OS";
if (navigator.platform.indexOf("Win")!=-1) OSName="Windows";
if (navigator.platform.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.platform.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.platform.indexOf("Linux")!=-1) OSName="Linux";
if (navigator.platform.indexOf("iPhone")!=-1) OSName="iOS";
if (navigator.platform.indexOf("Android")!=-1) OSName="Android";

document.write('Your OS: '+OSName);

if (OSName === 'Linux'){
    document.querySelector('.ios').innerHTML.style.display = 'none';
}
</script>
Solution

  • This script seems to work :) What we did, was specifying the class to its div. Somehow the class didn't do it itself.

    If anybody with great coding skills, can make this a plugin, it would take my money! BUT! Please name the plugin something awesome.

    <script>
let ios = document.querySelector('div.fusion-flex-container.ios');
let android = document.querySelector('div.fusion-flex-container.android');
let OSName = "Unknown OS";
if (navigator.appVersion.indexOf("Win") != -1) OSName = "Windows";
if (navigator.appVersion.indexOf("Mac") != -1) OSName = "MacOS";
if (navigator.appVersion.indexOf("X11") != -1) OSName = "UNIX";
if (navigator.appVersion.indexOf("Linux") != -1) OSName = "Linux";

document.write('Your OS: ' + OSName);

console.log(OSName);
if (OSName == "Windows") {
   ios.style.display = "none";
   console.log('windows');

} if (OSName == "Linux") {
   ios.style.display = "none";
    console.log('Linux');

} if (OSName == "MacOS") {
   android.style.display = "none";
    console.log('MasOS');


};
</script>