web-dev-qa-db-ja.com

Windowsを検出するためのCSSメディアクエリはありますか？

Mac OS用とWindows用の2つのわずかに異なる背景色を指定します。

cssmedia-queries
23
colmtuite

webページの表示に使用するOSを指定するプロパティはありませんが、JavaScriptで検出できます。オペレーティングシステムの検出例を次に示します。

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";

console.log('Your OS: '+OSName);

わかった？、今すぐdocument.write特定のオペレーティングシステム用のダウンロードスタイルシートを記述します。 :)

別の例として、jqueryを使用していると想定しました。

if (navigator.appVersion.indexOf("Win")!=-1) 
{
  $(body).css('background','#333');
} else {
  $(body).css('background','#000'); // this will style body for other OS (Linux/Mac)
}
28
Ariona Rian

最新のmozillaバージョンで利用できます。

-moz-os-versionは次の値を提供します。

  • windows XP
  • windows Vista
  • windows-Win7
  • windows-Win8

サポートは制限されています https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

@media (-moz-os-version: windows-xp), (-moz-os-version: windows-Vista),
(-moz-os-version: windows-win7), (-moz-os-version: windows-win8) {
    body{
        background-color: white;
    }
}
2
zainengineer

古いバージョンのFirefoxは、自動更新を使用していないウィンドウを検出し、バージョン4以降を使用している可能性もあります。それはより基本的でバージョンを知らせず、あなたがウィンドウにいるという事実だけです。私は好奇心が強いので、しばらく前のテスト用にこれを作成しました。

@media screen and (-moz-windows-theme) {
    body {
        background-color: white;
    }
}

これは https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries でもカバーされています

1
Jeff Clayton

CSSではできません。せいぜい@mediaフィルターして、モバイルデバイスとターゲットを比較できるようにします。デスクトップデバイスですが、@osタイプのフィルター。

あなたはIEのコンディショナルタグでそれを達成することができます：

<link rel="stylesheet" href="everyone.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->

Mac固有のスタイルを 'everyone' CSSに入れ、IEバージョンで必要なものをすべてオーバーライドします。

もちろん、これは、（古代）IE for Macバージョン）を使用しているユーザーを取得した場合は失敗しますが、すべての最新ユーザーをカバーする必要があります。

0
Marc B