@media screen and (min-width: 1920px) {
   body {
     background-color: red;
   }
}

CSSのメディアクエリではこれまで、画面の解像度によって適用するブロックを変更するmin-widthやmax-widthだけを使っていました。

最近、初めて画面の縦横比によって適用するブロックを切り替えるaspect-rasioを使いました。

@media (min-aspect-ratio: 16 / 9) {
  body {
    background-color: red;
  }
}

16 / 9の部分が1.77778と計算結果が書かれていると、Firefox (Servo)では機能するのですが、Chrome (Blink)やSafari (Webkit)では機能しませんでした。

なぜ発生したのか

SASSを利用していました。

$threshold: 16 / 9

@media (min-aspect-ratio: $threshold)
  body
    background-color: red

SASSの内容はこうです。

@media (min-aspect-ratio: 1.77778) {
  body {
    background-color: red;
  }
}

これがコンパイル結果のCSSです。

解決

$threshold: "16 / 9"

@media (min-aspect-ratio: $threshold)
  body
    background-color: red

BlinkやWebkitでも動作するCSSを出力してもらうための修正は簡単です。文字列として変数を宣言するだけです。

@media (min-aspect-ratio: 16 / 9) {
  body {
    background-color: red;
  }
}

このCSSがコンパイル結果として得られます。