Как получить ширину 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, это не сработало бы для меня по разным причинам.
Ответы
Ответ 1
Хорошо, поэтому после нескольких часов отладки я наконец нашел решение, после которого я был, но, к сожалению, это не чистое решение для CSS:
Вы должны применить CSS:
iframe {
min-width: 100%;
width: 100px;
*width: 100%;
}
Если вы установите ширину ниже ширины портрета и установите минимальную ширину на 100%, вы получите width: 100%
, но на этот раз версию, которая действительно работает, и теперь iframe принимает фактическую ширину контейнера и а не ширины ландшафта. *width: 100%;
существует так, что в IE6 ширина будет равна 100%.
Однако это работает только с атрибутом iframe scrolling="no"
, если прокрутка разрешена, то она больше не работает. Таким образом, это может ограничить его полезность в некоторых случаях.
Ответ 2
Ответ здесь: размер iframe с CSS на iOS
Просто оберните свой iframe в div с помощью:
overflow: auto;
-webkit-overflow-scrolling:touch;
http://jsfiddle.net/R3PKB/7/