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

Question

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>

You may want to put the script after the
. Because the script will run before the div is initialised. Using jQuery OnReady also help. — reinskywalker, Sep 02 '20 at 09:44

score 1 · Accepted Answer · answered Sep 04 '20 at 06:41

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>

score 0 · Answer 2 · answered Sep 02 '20 at 09:49

0

use navigator.appVersion.indexOf instead of navigator.platform.indexOf, full details explained in this answer: Show or Hide Div based on OS

answered Sep 02 '20 at 09:49

moghwan

1,829
2
17
29

I tried this. It work so that i can make an alert saying android, if on an android device. But it can't seem to hide the section. – Emil De Fønss Gandrup Sep 02 '20 at 10:11
add script in the end of the page and remove the 'innerHTML' after querySelector. – moghwan Sep 02 '20 at 10:47

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

2 Answers2