Подтвердить что ты не робот

Как получить ширину iframe 100% в портфолио iPhone

В основном у меня такая же проблема, как здесь, но поскольку он никогда не получал хороший ответ, я отправляю вопрос.

Таким образом, проблема заключается в том, что только в iPhone Safari width="100%" на портрете кажется неправильным и дает IFrame ширину ландшафта. И я не могу понять, что здесь происходит.

Я использую правильный видовой экран: 

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />

И сайт в пределах IFrame может фактически идти более узким, чем 320 пикселей, и также имеет тот же самый вид просмотра. (Я читал один из подобных вопросов, что это может быть фактором, поэтому я просто уточняю).

В отладчике я вижу, что до того, как URL был добавлен, iFrame offsetWidth был 304px, что верно, и после загрузки было 588 пикселей, что верно для пейзажного вида. Но почему это изменилось, я понятия не имею. Страница внутри IFrame происходит из другого домена, так что не может повлиять на нее, а главная страница ничего не делает с шириной iframe.

iPhone, который я использую, - это iPhone 5 iOS 7.0.2

PS. Пожалуйста, не публикуйте ответы на JS, где вы изменяете размер iframe вручную при изменении размера окна. В настоящее время я ищу исправление без JS, и это мой последний вариант, который я планирую использовать. Также, пожалуйста, не отправляйте сообщение в ответ @media CSS, если бы вы установили min-width в 320 пикселей на ширину взгляда на iPhone, это не сработало бы для меня по разным причинам.

4b9b3361

ОТВЕТЫ

Ответ 1

Хорошо, поэтому после нескольких часов отладки я наконец нашел решение, после которого я был, но, к сожалению, это не чистое решение для CSS:

Вы должны применить CSS:

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

Если вы установите ширину ниже ширины портрета и установите минимальную ширину на 100%, вы получите width: 100%, но на этот раз версию, которая действительно работает, и теперь iframe принимает фактическую ширину контейнера и а не ширины ландшафта. *width: 100%; существует так, что в IE6 ширина будет равна 100%.

Однако это работает только с атрибутом iframe scrolling="no", если прокрутка разрешена, то она больше не работает. Таким образом, это может ограничить его полезность в некоторых случаях.