1

サイトでメディア クエリを使用していますが、ウェブからモバイルまで完全に機能します。今、いくつかのスタイルを Apples Retina MBP (iPad、iPhone などではありません) だけに使用したいと考えています。CSSを変更すると、すべてのデバイスでのみ変更されます。

彼がテストした Macbook Pro だけの防弾メディア クエリを知っている人はいますか?

4

3 に答える 3

2

メディア クエリはユーザー エージェント/デバイスを検出しません。特徴(解像度や向きなど)を検出します。JavaScript を使用してボディにクラスを適用し、そこからスタイルを適用してみてください。

var retina = (window.retina || window.devicePixelRatio > 1);
if (retina) {
    $('body').addClass('retina'); // for example
}

次に、CSSで

body.retina {
    // styles
}

body.retina #element {
    // styles
}

ソース: http://hjzhao.blogspot.co.uk/2012/07/detect-retina-display-using-javascript.html

于 2012-12-06T15:58:18.027 に答える
0

私は試してみます

@media screen and (min-height: (yourtargetdevicepixelsheight)px) and (min-width: (yourtargetdevicepixelswidth)px) {
     you styles here
}

それはAppleのRetina MBPであるため、多くのデバイスが両方の条件を持つとは思いません。追加してロックすることもできます

and (max-height: (yourtargetdevicepixelsheight+1)px ) and the same with 'width'

それが役に立てば幸い

于 2012-12-06T16:33:12.907 に答える