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

[Zacker2]

Для рамки назначаю медиа, в опера и хром с компьютера все работает. т.е. рамка в зависимости от ширины экрана уменьшается. Но в iphone (собственно для чего все это и делается) не работает!
Для opera и chrome достаточно если просто в фрейме проставлять white 100%, но safari этого мало, в связи с этим и пошел дальше!

<iframe class="iframe" src="/iframe.html" ></iframe>

css

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;
  }
}

Помогите понять что не хватает сафари, в мета

    <meta name="viewport" content="width=device-width, initial-scale=1">

имеется!

 

[alex_me]

Попробуй or and

Для просмотра ссылки Войди или Зарегистрируйся

 

[Zacker2]

Вот это помогло, 1й ответ: Для просмотра ссылки Войди или Зарегистрируйся
Обошлось без media, width заработал...

  iframe {
        width: 1px;
        min-width: 100%;
        *width: 100%;
    }