1

レスポンシブにしようとしているポートフォリオ Web サイトがあり、メディア クエリを使用して動作させるのに少し問題がありますが、S3 で人々に表示できるようにしたいと考えています。この投稿の診断ツールを使用して、電話にインストールされている 2 つのブラウザー (Samsung の既定のブラウザーと Chrome) でデバイスの幅の 2 つの異なる値を得たので、デバイスのピクセル比と組み合わせて「幅」を使用しています。

スタイルシートにあるものは次のとおりです。

body, html
{
    display: block;
    font-family: quicksand, arial;
    background-color: #EFEFEF;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#container
{
    background-color: red;
    width: 50%;
    height: 50%;
}

@media only screen and (max-width: 22em) and (-webkit-device-pixel-ratio: 2)
{ 
    #container
    {
        width: 100%;
        height: 100%;
        background-color: yellow;
    }   
}

何らかの理由で、S3 でページを表示しても背景色が赤のままです。何か不足していますか？

4

1 に答える 1

4

Android 4.1.2 を搭載した Samsung S3 では、すべてのメディア クエリ機能 (最大高さ、幅、デバイスの高さと幅、さらには color:8) を試しましたが、これだけが機能しました。

/* Samsung S3 default browser portrait*/
@media only screen and (device-width: 720px) and (device-height: 1280px) and (orientation: portrait) {
body { background:yellow;} 
}

/* Samsung S3 default browser landscape */
@media only screen and (device-width: 1280px) and (device-height: 720px) and (orientation: landscape)  {
body { background:#000;} 
}

これは、可能性のあるすべてのクエリに対するpieroxyメディア クエリ診断ツール テストのスクリーンショットです。

どちらもオリエンテーションなしで機能しますが、ロード/リフレッシュなしでは妥当性を変更しないことに注意してください。

これが、使用する可能性のある他のクエリと競合せずに役立つことを願っています

于 2014-01-07T03:34:03.603 に答える