1

私は自分のサイトで次のコードを使用して、iPadの縦向きのdivのサイズを縮小していますが、正常に機能しています。

@media only screen and (min-width: 768px) and (max-width: 959px) {
   .mosaic-block {
      width: 226px;
      height: 135px;
    }
}

iOSポートレート

ただし、向きを横向きに変更すると、divは、デフォルトの大きいサイズのdivに戻るのではなく、同じ値を保持します。

ここに画像の説明を入力してください

サイトがランドスケープモードで直接読み込まれる場合、正しく表示されます（大きいサイズで）。

ユーザーが向きを縦向きから横向きに切り替えたときに、より大きなcss divディメンションが適用されていることを確認するにはどうすればよいですか？

4

2 に答える 2

2

あなたのメディア クエリが正しいとは思いません。iPad を回転させても、iPad の幅/高さは変わらず、向きだけが変わります。メディア クエリを次のように更新してみてください。

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
  .mosaic-block {
    /* default size here */
  }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
  .mosaic-block {
    width: 226px;
    height: 135px;
  }
}

参考：CSS-Tricks メディアクエリ

于 2012-06-30T12:49:48.700 に答える
0

これは、iPadのポートレートを正しくターゲットにするのに役立ちました。.mosaic-blockのサイズを正しく変更していましたが、含まれている画像のサイズを変更する必要がありました。

レスポンシブデザインにはamaziumフレームワークを使用し、アニメーションロールオーバーにはmosaic.jsを使用しています。完全なHTMLは次のとおりです。

<div class="mosaic-block fade">

<a href="image.jpg" rel="shadowbox" target="_blank" class="mosaic-overlay details"
title="Title">
        <h4>A title</h4> 
        <p><span>Subheading:</span></p>
        <ul>
            <li><p>Some text</p></li>
            <li><p>Some more text</p></li>
            <li><p>Even more text</p></li>                                                              
        </ul>   
</a>
<div class="mosaic-backdrop"><img src="backdrop_image.jpg" class="max-image"/></div>

Amaziumは、.max-imageルールを使用して、さまざまな解像度で画像サイズを変更します。

.max-image  { width:100%; height:auto; }

私の解決策は、iPadのポートレートの.max-imageに特定の画像サイズを設定することでした。

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
.max-image {
width:286px;
height:171px;
}
}

JunkMyFunkさんのアドバイスに感謝します。

于 2012-07-03T12:31:25.713 に答える