HTML Измените размер iframe на отзывчивый iframe

Question

Здравствуйте, у меня есть iframe на моем сайте, это ширина 728 пикселей.

Изображение: http://s8.postimg.org/5r5d4wm7n/iframe.png

Это синий фон IFRAME.

У меня есть проблема в мобильном телефоне это выглядит следующим образом: http://s10.postimg.org/drrxc4ak9/iframe2.png

Как я должен это исправить, чтобы быть шириной 100%, но до сих пор все 728px будет на экране?

Спасибо!

Answer 1

Попробуйте использовать комбинацию ширина и максимальной ширину

iframe { 
    width: 100%; 
    max-width: 728px; 
} 

Answer 2

Вы можете попробовать это:

iframe { 
width: 728px; 
} 


@media screen and (min-width: 100px) and (max-width: 540px) { 
iframe { 
width: 100%; 
} 

Затем, когда размер ширин экрана выше 540px, ваш обычный код будет работать. В этом случае 728px. Когда размер ширины экрана равен 100px-540px, iframe будет равен 100%.

В настоящее время записывается на моем ipad, поэтому его трудно проверить код. Поэтому я сожалею, если есть некоторые ошибки.

Надеется, что это помогает