0

基本的に、私は 2 つのメディア クエリを必要とするサイトを構築しています。1 つはモバイルをカバーし、もう 1 つはタブレットをカバーします。それが要件です。

私が抱えている問題は、モバイルの場合、Samsung Galaxy S3 をカバーするには最大幅を 640 ピクセルにする必要があることですが、タブレットの場合、Nexus 7 の縦向きの最大幅は 599 であるため、携帯電話がタブレット クエリに陥るリスクがあります。

誰も私がこれを回避する方法をアドバイスできますか?

4

3 に答える 3

3

この設定を適用できます。それはうまくいきます（少なくとも私にとっては）：

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }
于 2012-12-12T13:22:19.537 に答える
1

私は非常によく似た問題を抱えていました。可能なすべてのメディアクエリを試しました。タブレットと携帯電話を区別するmax-device-widthには、ピクセル幅ではなく、物理的な寸法のメディア クエリを使用する必要があります。

以下は、横向きのタブレットをターゲットにするために使用した CSS の抜粋です。以下をご覧くださいmax-device-width。

@media screen and (max-device-width: 1280px) and (orientation: portrait),
screen and (max-device-width: 23cm) and (orientation: landscape),
screen and (orientation: landscape) and (max-device-width: 1280px) and (max-device-height: 1000px)

iPad (非網膜)、iPad 2 (網膜)、および ASUS Transformer タブレットでこのクエリを使用しました。サイズの指定はcm問題なく機能しますが、一部のタブレットではインチinが機能しませんでした (現時点ではどのタブレットか思い出せません)。

max-device-widthメディア クエリの公式説明への参照: http://www.w3.org/TR/css3-mediaqueries/#device-width

于 2012-12-12T13:26:56.140 に答える
0

モバイルとタブレットについてはこちらを参照してください。テスト ページで実行すると、実際のデバイスで正しいサイズを見つけることができます。

https://jsfiddle.net/t2bybrdu/

html:

<div class="body-test">
      <div class="center green-btn">Browser size tester:</div>
      </br>
      </br>
      <div class="result"></div>
</div>

js:

$(".body-test .center").click(function(){
    var browser_size = $( window ).width();
    console.log( browser_size + 20);
    console.log( "viewport size: " + Number(20 + browser_size) );
    $(".body-test .result").text("Your viewport size is: " + Number(browser_size + 20) + "px");     
});

CSS:

.green-btn {
    display: block;
    background: green;
    color: white;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 4px;
    width: 180px;
}
.body-test {
    padding-top: 120px;

}
.body-test  .result {
    text-align: center;
    font-weight: bold;
    padding: 3em auto;
}

.body-test  .center {
    position: relative;
    left: calc(50% - 100px); 
    cursor: pointer;
}
于 2015-04-30T03:33:58.557 に答える