画面サイズチェックデバイス情報
- デバイスピクセル比
- 検出値
- 画面の幅
- 検出値
- 画面の高さ
- 検出値
- 画面の幅（有効領域）
- 検出値
- 画面の高さ（有効領域）
- 検出値
- ウインドウの幅
- 検出値
- ウインドウの高さ
- 検出値
「デバイス情報」はJavaScriptで取得しています。
Windowsタブレット上のIE 11やChrome／Operaでは、デバイスの回転（DeviceOrientationイベント）により、「画面の幅／高さ」の値が自動的に更新されます。このイベントが感知されないOSでは、ページの更新が必要です。
ウインドウ サイズと背景色
- 幅2561ピクセル以上
- 赤
- 幅2560ピクセル以下
- マゼンタ
- 幅1920ピクセル以下
- 青
- 幅1366ピクセル以下
- シアン
- 幅1280ピクセル以下
- 緑
- 幅1200ピクセル以下
- 黄
- 幅1080ピクセル以下
- オレンジ
- 幅1024ピクセル以下
- クリムゾン
- 幅960ピクセル以下
- 茶
- 幅800ピクセル以下
- 紫
- 幅640ピクセル以下
- カーキ
- 幅600ピクセル以下
- グレー
- 幅480ピクセル以下
- 白
- 幅380ピクセル以下
- 黒
ページの背景色は、ウインドウサイズを基にして、CSSのメディアクエリーで指定しています。その他のCSSを含め、IE 11もしくは他の最新ブラウザーであれば正しく表示されます。
内容を囲んでいる「frame」ボックスの幅は、一つ下のウインドウサイズ-64ピクセルです。たとえば、ウインドウサイズが「幅2560ピクセル以下」の場合は1920-64=1856ピクセルです。なお、最小幅の「幅380ピクセル以下」の場合は、316ピクセルです。
CSSのフレキシブルボックスレイアウトを使用しているため、これに非対応のIE 9ではレイアウトが崩れます。