OSに基づいてHTML要素を表示するにはどうすればよいですか？

Question

これはこれまで私が持っていたものです。基本的には、MacユーザーにはAFPリンクを、PCユーザーにはWindows IEスタイルのリンクを使用する内部Webサイトがあります。過去にページを別々に管理してきましたが、私はそれらを統一しようとしています。私はdivをIDの "brandsmac"と "brandspc"で使い、それぞれのタイプのユーザーにとって必要でない部分を隠そうとしています。私がこれを実行すると、私のページは空白に戻ります。ここに別のレンチを投げるために、これは純粋なHTMLのフロントページを持つWordpressサイトです。これがフロントページです。私はここで同様の記事を見つけ、多くの人が助けてくれましたが、私はロードブロッキングを打ちました。前もって感謝します。

function loadBrandsPage() { 
    var OSName="Unknown OS"; 
    if (navigator.appVersion.indexOf("Win")!=-1) { 
     OSName="Windows"; 
    } else { 
     OSName="MacOS"; 
    } 
    if(OSName == "Windows") { 
     document.getElementById("brandsmac").style.display = 'none'; 
     document.getElementById("brandspc").style.visibility="visible"; 
    } 
    if(OSName == "MacOS") { 
     document.getElementById("brandsmac").style.visibility="visible"; 
     document.getElementById("brandspc").style.display = 'none'; 
    } 
} 

Answer 1

あなたはCSS displayとvisibilityの混合物を使用しています。 document.getElementById("brandspc").style.visibility="visible";の行をdocument.getElementById("brandspc").style.display="block";に変更すると動作します。

私はあなたがそうどんな結果が得られないであろうことのvisibilityを変更しようとdisplay: none;との両方の要素（#brandspcと#brandsmac）を非表示にすることでスタートしましたと仮定しています。

display: none：DOMから要素を削除します。

visibility: hidden：要素をユーザーから隠すと、要素の間隔が維持されます。

---

ページロード時（コメントに記載されているように）に起こるのではなく、自己呼び出し機能を利用できます。既存の関数を括弧で囲むだけです。

(function loadBrandsPage() { 
    var OSName="Unknown OS"; 
    if (navigator.appVersion.indexOf("Win")!=-1) { 
     OSName="Windows"; 
    } else { 
     OSName="MacOS"; 
    } 
    if(OSName == 'Windows') { 
     document.getElementById("brandsmac").style.display = 'none'; 
     document.getElementById("brandspc").style.display="block"; 
    } 
    if(OSName == 'MacOS') { 
     document.getElementById("brandsmac").style.display="block"; 
     document.getElementById("brandspc").style.display = 'none'; 
    } 
})(); 

これを反映するようにフィーリングを更新しました。

more info

Here's a demo of it working with the above changes

Answer 2

あなたは、オペレーティング・システムをこのように見つけることができます。

os = navigator.platform;