Динамическое изменение размера iframe

[Sokoljr]

Есть iframe с сылкой на flash игру, для desctopov прописано стандартное разрешение и все норм, а вот для мобильных телефонов с разными разрешениями появляется проблема, как сделать так чтобы под все разрешения этот iframe с игрой нормально влазил под разные экраны?

media запросы не помогают

<iframe class="mobile hidden" src="http://www"></iframe>
<iframe class="desctop" src="http://www"></iframe>
<style>
.desctop {
	width: 100%; 
	height: 600px;
}
</style>

$(document).ready(function() {
		if ( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
			$('.mobile').removeClass('hidden');
			$('.desctop').addClass('hidden');
		} else {
			$('.mobile').addClass('hidden');
			$('.desctop').removeClass('hidden');
		}
});

[Aetae]

Не вижу на самом деле где тут проблема, и в чём она конкретно.)
Но можешь попробовать так:

.mobile{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

[Sokoljr]

Aetae,
И что таким способом iframe растянется по всему экрану?

нашел выход с помощью bootstrap классов