iframe media queries - в iphone не работает

Zacker2

Гуру форума
Регистрация
19 Фев 2013
Сообщения
242
Реакции
75
Для рамки назначаю медиа, в опера и хром с компьютера все работает. т.е. рамка в зависимости от ширины экрана уменьшается. Но в iphone (собственно для чего все это и делается) не работает!
Для opera и chrome достаточно если просто в фрейме проставлять white 100%, но safari этого мало, в связи с этим и пошел дальше!
HTML:
<iframe class="iframe" src="/iframe.html" ></iframe>

css
HTML:
iframe {
  margin: 40px auto 0 auto;
  border: none;
  height: 696px;
  width: 100%;
  padding: 0px;
}

@media only screen
   and (max-device-width: 647px)
   and (orientation:portrait) {
iframe {
  width: 536px;
  }
}

@media only screen
   and (max-device-width: 647px)
   and (orientation:portrait) {
iframe {
  width: 536px;
  }
}

@media only screen
   and (max-device-width: 580px)
   and (orientation:portrait) {
iframe {
  width: 528px;
  }
}

@media only screen
   and (max-device-width: 544px)
   and (orientation:portrait) {
iframe {
  width: 451px;
  }
}


@media only screen
   and (max-device-width: 455px)
   and (orientation:portrait) {
iframe {
  width: 406px;
  }
}

@media only screen
   and (max-device-width: 400px)
   and (orientation:portrait) {
iframe {
  width: 358px;
  }
}

@media only screen
   and (max-device-width: 372px)
   and (orientation:landscape) {
iframe {
  width: 284px;
  }
}

Помогите понять что не хватает сафари, в мета
HTML:
    <meta name="viewport" content="width=device-width, initial-scale=1">
имеется!
 
Последнее редактирование:
Вот это помогло, 1й ответ: Для просмотра ссылки Войди или Зарегистрируйся
Обошлось без media, width заработал...

HTML:
  iframe {
        width: 1px;
        min-width: 100%;
        *width: 100%;
    }
 
Назад
Сверху