11

max-widthメディア クエリでは、 、min-width、 max-device-widthおよびmin-device-widthを見てきましたorientation。

JavaScript の観点から、これらは を参照していdocument.body.clientWidthますか? それともwindow.outerWidth？また、あるようですdocument.body.offsetWidth。

すべての有効な css メディア クエリ パラメータと、それらと一致する JavaScript 属性を一覧表示するリソースはありますか?

4

2 に答える 2

13

したがって、JavaScriptで同等のすべての有効なcssメディアクエリパラメータのリストが必要です。

メディアクエリのW3C仕様に依存して、それを試してみましょう 。

メディアタイプ

JavaScriptのプロパティ/メソッドを使用してメディアタイプ（画面、印刷など）を直接取得することはできないようです。そのため、回避策、スクリプト、またはプラグインに依存する必要があります。

私が見つけた：

  1. matchMedia polyfillが最良の解決策のようです（ModernizrとRespond.jsでも使用されています）
  2. CSSメディア検出スクリプト（古いようです）
  3. jMediaType（まだcssに依存しています）

メディア機能（直接検出可能）

1.幅

window.innerWidth// document.body.clientWidth（document.documentElement.clientWidth以下を参照）

2.高さ

window.innerHeight// document.body.clientHeight（document.documentElement.clientHeight以下を参照）

3.デバイス幅

screen.width

4.デバイスの高さ

screen.height

5.オリエンテーション

window.orientation（下記参照）

6.色

screen.colorDepth

7.解像度

screen.pixelDepth/ window.devicePixelRatio（以下を参照）

メディア機能（間接的に検出）

1.幅/高さ

widthブラウザ間の違いを考えると、とを取得する関数が必要ですheight。少し前に、クロスブラウザで機能するこのスニペット（どこを思い出せないか）を見つけました：

var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0];

var width = w.innerWidth||e.clientWidth||g.clientWidth;

var height = w.innerHeight||e.clientHeight||g.clientHeight;

2.アスペクト比

「幅」メディア機能の値と「高さ」メディア機能の値の比率

width/ height（上記を参照）

3.デバイスのアスペクト比

'device-width'の値と'device-height'の値の比率</p>

screen.width/screen.height

4.解像度

出力デバイスのピクセルの密度。「dpi」および「dpcm」単位は、出力デバイスの解像度、つまりデバイスピクセルの密度を表します。

したがって、多くの人が考えるように、画面サイズ（幅x高さ）ではありません！

var resolution = window.devicePixelRatio||screen.pixelDepth||screen.colorDepth;

screen.pixelDepthFirefox専用であり、quirksmode.orgでwindow.devicePixelRatio互換性を見つけることができます。

ここでscreen.colorDepth私はそれがフォールバックとして大丈夫だと読んだ。

5.モノクロ

モノクロフレームバッファのピクセルあたりのビット数。デバイスがモノクロデバイスでない場合、出力デバイス値は0になります

if ( screen.colorDepth == 2) {
    var monochrome = /* retrieve resolution here, see above */;
}else{
    var monochrome = 0;
}

6.オリエンテーション

'height'メディア機能の値が'width'メディア機能の値以上の場合は'portrait'です。それ以外の場合、「方向」は「風景」です。

if ( width > height ) {
    var orientation = 'landscape';
}else{
    var orientation  = 'potrait';
}

このwindow.orientationプロパティはすべてのブラウザでサポートされているわけではなく、数値を返すため、W3Cで意図されている方向に直接関係していません。詳細については、SOでこの回答を確認してください。

メディア機能（検出不能）

JavaScriptで次のメディア機能を検出する方法が見つかりませんでした（そしてそれが可能だとは思いません）：

  • カラーインデックス
  • スキャン
  • グリッド

もっと興味深いもの

  • screen.availHeight=画面の高さからインターフェイス機能（タスクバーなど）を引いたもの
  • screen.availWidth=画面の幅からインターフェイス機能（タスクバーなど）を引いたもの
  • JavaScriptでメディアクエリをエミュレートするために、Modernizrのmq（）メソッドがありますが、注意してください。ブラウザがメディアクエリをサポートしていない場合、コードはまったく実行されず、常にfalseが返されます。

ソース

  1. 幅/高さ：http ：//www.howtocreate.co.uk/tutorials/javascript/browserwindow
  2. デバイスの幅/高さ：http：//responsejs.com/labs/dimensions/
  3. 向き：JavaScriptを使用してブラウザでAndroid携帯の回転を検出します
  4. 解像度と色に関連するもの：http ：//www.javascriptkit.com/howto/newtech3.shtml
  5. モノクロ：Javascript：モノクロ表示を検出
  6. ピクセル比：http ：//www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html
于 2012-09-26T18:29:32.047 に答える
0

min-width：およびmax-width：クエリは論理ウィンドウ（ユーザーがブラウザのウィンドウのサイズを変更するとサイズが変化します）を参照し、min-device-width：およびmax-device-width（および方向： ）クエリは、物理的な画面/ビューポートを参照します（「meta ... viewport ...」ステートメントで修正された後は、サイズは変更されません）。

目標と対象者によっては、メディアクエリよりも適した代替アプローチが見つかる場合があります。http://www.ckollars.org/alternative-to-media-queries.htmlを熟読すると役立つ場合があります

于 2012-09-26T20:21:57.990 に答える