0

これまでのところ、次のメディアクエリしか見つけることができませんでした:

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

ただし、Webkit ブラウザーのみをサポートしているようです。(少なくとも) -moz- および -ms- (-o-) ブラウザーに対する同様のクエリはありますか?

4

2 に答える 2

2

device-pixel-ratio または min-resolution を検出する代わりにできることは、ブラウザ サイズの解像度であるビューポート幅ではなく、画面サイズの解像度であるデバイス幅を検出することです。これにより、まず特定のデバイスをターゲットにしようとしたときに正しいメディアクエリが得られ、使用する必要がある「網膜」デバイスを検出できます。

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
/* code goes here */
}

これにより、iDevice の Retina ディスプレイのようにスケーリングされたデバイスを識別するメディア クエリが設定され、他のデバイスがこれらの css スタイルを受信しないように、それらのデバイスのみをターゲットにすることができます。

それがうまくいくかどうか教えてください。

于 2013-01-09T22:58:23.463 に答える
-4

Retina ディスプレイのようなものはありません。私は、Apple が「網膜」と呼んでいるものを備えた MacBookPro を持っています (つまり、あなたが何を意味していると思うかは理解できます) が、この言葉は完全に作り話であり、実際には何の意味もありません。

そのため、厳密に定義されている「高性能のゲーム用コンピューター」を検出できないのと同じくらい、それを検出することはできません。

于 2013-01-09T22:38:13.393 に答える