mobile - ピクセル密度の CSS メディア クエリ: -moz-min-device-pixel-ratio と min--moz-device-pixel-ratio の比較

Question

-moz-min-device-pixel-ratioデバイスのピクセル密度に CSS メディア クエリを使用すると、との両方が表示されmin--moz-device-pixel-ratioます。

例えば：

@media 
  only screen and (-moz-min-device-pixel-ratio: 1.5) {
  /* styles go here */
}

対。

@media 
  only screen and (min--moz-device-pixel-ratio: 1.5) {
  /* styles go here*/
}

どちらが正しい？

前者を使用するいくつかのチュートリアル/ブログ:

• http://menacingcloud.com/?c=highPixelDensityDisplays
• http://css3.bradshawenterprises.com/blog/retina-image-replacement-for-new-iPad/

mozilla.org を含む、後者を使用するいくつかのチュートリアル/ブログ:

• http://www.slideshare.net/zomigi/css3-using-media-queries-to-improve-the-web-site-experience
• https://developer.mozilla.org/en/CSS/Media_queries/

Answer 1

2番目が正しいです。

これはhttp://www.quirksmode.org/blog/archives/2012/07/vendor_prefixes.htmlからのものです

-webkit-min-device-pixel-ratio: 1.5
min--moz-device-pixel-ratio: 1.5
-o-min-device-pixel-ratio: 3/2

Answer 2

私は、上で参照した脅威的な雲の記事の著者です。私の記事に記載されている device-pixel-ratio は、かなり前 (iPhone4 の起動) に書かれたものであるため、正しくありませんでした。

正しい Mozilla 構文を参照するように更新されました。

Mozilla が min--moz-device-pixel-ratio を選択した理由はわかりませんが、それが公式の形式として選択されているようです。