使用しているオペレーティングシステムに応じて異なるスタイルシートを適用する

2020-03-26 html css macos operating-system frontend

私のウェブサイトには、ピクセルに対する見方に非常に敏感なデザインのパーツがあります。

http://sandhals.ca/

現状では、MacOSを使用している場合、ホバリングからの小さなポップアップが上記のリンクで問題なく表示されるように思えます。ただし、Windowsでは動作しないようです。代わりに、ピクセルをここにあるように調整すると:

http://sandhals.ca/index2/index

彼らは働いているようです。問題は、オペレーティングシステムに応じて数値を調整するために、HTMLまたはCSSに何かを書き込むにはどうすればよいかということです。アイデアや提案はありますか?

Answers

JavaScriptが必要です。 これをテンプレートの下部またはドキュメントが読み込まれた後に追加します。 その後、本文のクラスに基づいてドキュメントのスタイルを設定できます。

<script> 
    var 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.body.classList.add( OSName);
</script>

Related