更改纵向和横向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方向的图像宽度和高度

回答

相关问题