Изменить ширину и высоту изображения для книжной и альбомной ориентации iOS

Я использую следующий код на моем сайте, чтобы уменьшить размер div в портретной ориентации iPad, и он работает успешно.

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

iOS портрет

Однако, когда я меняю ориентацию на альбомную, div сохраняет то же значение вместо того, чтобы возвращаться к большему размеру div по умолчанию.

введите здесь описание изображения

Если сайт загружается сразу в ландшафтном режиме - он отображается корректно (в большем размере).

Как я могу убедиться, что большие размеры css div применяются, когда пользователь переключает ориентацию с книжной на альбомную?


ios image dimensions landscape portrait
person nfrost21    schedule 29.06.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Я не думаю, что ваш медиа-запрос верен - ширина/высота 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

person JunkMyFunk    schedule 30.06.2012
comment
Спасибо за совет, мистер JunkMyFunk. - person nfrost21; 03.07.2012

arrow_upward
0
arrow_downward

Это помогло мне правильно нацелить iPad на портрет. Оказывается, я правильно изменил размер .mosaic-блока, но должен был изменить размер содержащегося в нем изображения.

Я использую фреймворк 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 uses the .max-image rule to alter the image size at different resolutions:

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

Мое решение состояло в том, чтобы установить определенный размер изображения для .max-image на портрете ipad:

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

Большое спасибо за совет Mr. JunkMyFunk.

person nfrost21    schedule 03.07.2012