更改纵向和横向iOS方向的图像宽度和高度

Question

我在my site上使用以下代码来减小ipad纵向方向上div的大小，并且它已成功运行。

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

但是，当我将方向更改为横向时，div保持相同的值，而不是返回到div的默认较大尺寸。

如果网站直接加载到横向模式 - 它会正确显示（尺寸较大）。

当用户将方向从纵向切换为横向时，如何确保应用较大的css div尺寸？

Answer 1

我认为您的媒体查询不正确 - 旋转时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

Answer 2

这有助于我正确定位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-image规则来改变不同分辨率的图像大小：

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

我的解决方案是在ipad portrait上为.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先生的建议。