1

Приветствую. Прошу помочь разобраться с media-запросами. Проблемная страница тут: http://kenka.mastersoftonline.ru/1/full/?page=index

Источник проблемы

Есть общий контейнер содержимого страницы div#page (дефолтная ширина – как для блока), который содержит элементы article (margin: 0px auto). Такая вот разметка:

<div id="page">
    <article>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </article>
</div>

После этого идут медиа-запросы:

@media screen and (max-width: 1124px) {
  #page > article,
  .main-width {
    width:800px !important;
    padding-left:0px !important;
    padding-right:0px !important;
  }
}
@media screen and (max-width: 924px) {
  #page > article,
  .main-width {
    width:600px !important;
    padding-left:0px !important;
    padding-right:0px !important;
  }
}

Суть проблемы

При отображении на iPad-е (да и в webkit-браузерах Android-а) article располагается не по центру, а сбивается к левому борту (ведет себя, как будто "margin: 0px").

Да и @media(max-width: 1124px) работает так, как будто ширина значительно меньше (пробовал на 3-м iPad-е, у которого ширина вьюпорта 2048px – в альбомной ориентации). Кроме того, заметил, что при повороте девайса в портретную ориентацию, @media(max-width: 1124px) не реагирует, будто так и осталась такая же ширина. Видимо, надо еще опрашивать media-аргумент orientation. Хотя, на обычных машинах этот аргумент лишь отражает соотношение сторон, насколько мне известно.

Для понимания происходящего сделал тестовую страницу, но проверить не могу, так как остался без девайса. Есть ли у вас опыт или соображения на этот счет? Или если кто-то, у кого есть iPad, может хотя бы сказать, что же отображается на тестовой странице в обеих положениях девайса, буду признателен.

4
  • Загляните сюда
    – Barmaley
    26 дек 2012 в 4:49
  • @Bars, есть расширение к ФФ ,который эмулирует IPhone chrispederick.com/work/user-agent-switcher
    – Vfvtnjd
    26 дек 2012 в 5:06
  • @Bars если ещё нужна помощь, то нужен сам код цельный и описание проблемы. 17 мар 2019 в 20:59
  • Да уж 7 лет прошло, столько воды утекло :) Да и описание проблемы, мне кажется, дано исчерпывающее, просто безнадежно устарело. Судя по оставленному мною же ответу, помощь не нужна более, спасибо
    – Bars
    21 мар 2019 в 20:01

1 ответ 1

1

Проблема была в том что дочерний элемент выходил за пределы родительского таким образом:

<div class="parent">
    <div class="child">Lorem ipsum</div>
</div>

CSS

.parent {
    max-width: 100%;
    overflow: hidden;
}
.child {
    margin: 0px -50%;
}

И хотя установлен overflow:hidden, браузер считал своим долгом показать всю ширину дочернего элемента. Ни в одном из десктопных браузеров этого не наблюдалось.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.