1

私のサイトには3つのメディアクエリがあります。私が抱えている問題は、iphoneの-webkit-min-device-pixel-ratioがAndroidデバイスで競合していて、このmqを取得した場合、画面がAndroidで正しく解決されないことです。サイトは正しくレンダリングされますが、iphone 4ではレンダリングされず、320ピクセル幅で動作します。

iphone 4 / 4sデバイスのみに-webkit-min-device-pixel-ratio：1.5メディアクエリを表示させる方法はありますか？

以下は私のメディアクエリです：

    /*iphone4*/
            @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {


            /*Main*/
            div#container {
                width: 480px;
            }
    }

/*Other mobile phones*/
        @media screen and (max-width: 767px) {

          div#container {width: 480px;}
        }

/*Tablets*/   
        @media only screen and (max-width: 1023px) and (min-width: 768px) {
         div#container {width: 768px;}

        }
4

1 に答える 1

1

iPhone 4の幅は（ピクセル単位で）どのくらいだと思いますか？また、スケール値はどのくらいだと思いますか？あなたのルールを読んで、あなたは「それが大きな電話なら、これを480幅にしなさい。それが網膜である小さい電話なら、それを480幅にしなさい、そうでなければ768」と言いたいように感じます。

background-size:containしかし実際には、iphone4は幅320ピクセル、スケール2であるため、コンテナの幅を320ピクセルにしてから、画像に対して何かを実行する必要があります。

しかし、それを無視して...このページ：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Media2</title>
<style>
body, html {margin:0;padding:0;height:100%;width:100%; background-color:#000000;}
#block {background-size:contain; background-image:url('http://www.robotwoods.com/images/blog/640_300px.png'); display:block; width:320px; height:150px; }
@media (max-width: 767px) { body {background-color:#0000FF;} }
@media (max-device-width: 320px) and (-webkit-min-device-pixel-ratio: 2) { body {background-color:#00FF00;} }
@media (min-width: 768px) { body {background-color:#FF0000;} }
</style>
</head>
<body>
<div id="block"></div>
</body>
</html>

表示：

  • iPodtouchの青
  • AndroidNexusSの青
  • ブラックベリーボールドの青
  • iPhone4の緑
  • iPadで赤

テストする他のデバイスがある場合は、http：//www.robotwoods.com/dev/misc/so_media2.htmlにアクセスできます。そして、私はここにメディアクエリについての小さなエントリを投稿しました：http：//blog.robotwoods.com/2012/08/media-queries/しかし、実際にはピクセル比の側面には入りませんでした

于 2012-08-02T02:09:53.983 に答える