ビューポートが16:9以上かどうかの判定にaspect-ratioを使って行おうとしていた。が、min-aspect-ratio: 16/9でうまく動かず、もしや未実装かとあーでもないこーでもないと色々やってたら、単にmax-aspect-ratioでやるべきなだけだった。
Demo: Detect viewport ratio is 16:9+ or not
aspect-ratio特性では<ratio>という種類の値で指定する。この<ratio>は正の整数/正の整数でしか書くことができない。しかし、min-かmax-プリフィックスをつける場合、比率として少数化した値で扱われる。そのため16:9より縦の比率が大きい16:10や16:12にマッチさせたい場合は、max-プリフィックスを使う必要がある。
aspect-ratio特性を使ったメディア・クエリーの式は縦幅を分母とした分数で記述し、プリフィックスはそれを少数に変換して考える。こう覚えておくと良さそう。
16:9以上という考え方自体が間違っているのかもしれない。縦横比は横幅が基準という印象を持っていて、それに従うと以上で良いと思っていた。けれども縦幅が分母、つまり基準になるこのようなケースもあるようだ。
またこの調査の過程でmin-height: 56.25vwとかでも良いんじゃないかと考え、試したのもデモに載せておいた。56.25vwは100vw / 16 * 9で計算した答えで、ビューポートの横幅が100vwで参照できることを利用してる。けれどもFirefox 33と35では動いたものの、Chrome 38(と40)やInternet Explorer 11(と12)では動かなかった。これら動かないブラウザーでは、どうもvw単位そのものがメディア・クエリーの式では扱えないみたいだ。