更改縱向和橫向iOS方向的圖像寬度和高度

我在my site上使用下面的代碼來減少ipad縱向方向上的div大小，並且它工作正常。更改縱向和橫向iOS方向的圖像寬度和高度

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

iOS portrait

然而，當我的方向改爲橫向，股利保持相同的值，而不是返回到默認值大的div大小。

enter image description here

如果站點直接裝入橫向模式 - 它正確顯示（在較大的尺寸）。

如何確保在用戶將方向從縱向切換到橫向時應用較大的css div尺寸？

來源

2012-06-29 nfrost21

我不認爲你的媒體查詢是正確的 - 當它旋轉時，只有方向改變時，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 media queries

來源

2012-06-30 12:49:48 JunkMyFunk

感謝Mr. JunkMyFunk的建議。 – nfrost21

幫我正確地瞄準iPad的畫像。事實證明，我正確調整了.mosaic-block的大小，但應該調整包含的圖像的大小。

我將amazium framework用於響應式設計，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圖像規則改變，在不同分辨率的圖像尺寸：

.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; 
} 
}

非常感謝建議Mr. JunkMyFunk。

來源

2012-07-03 12:31:25 nfrost21

更改縱向和橫向iOS方向的圖像寬度和高度

回答

相關問題