Как изменить размер изображения html5 для мобильного

Question

Я заранее извиняюсь за не выяснить, как отформатировать это правильно

Я преобразовал Flash SWF, содержащие кнопки и очень простой сценарий действий в файл html5. Я загрузил .html и поставить его на свой веб-сайт WordPress с помощью кода Iframe я нашел в Интернете:

<div id="iframewrap"><iframe id="iframeid" name="iframeName" src="test.html" 
height="578" width="110%" frameborder="0" marginwidth="0" marginheight="0" 
scrolling="yes"></iframe></div> 

<style type="text/css"><!--#iframewrap { width: 110%; padding: 0px; 
top:-25px; position:relative; overflow:hidden;} #iframeid { width:110%; 
height:578px; margin:10px 10px 10px 10px; overflow:hidden;} #iframeid 
{ -ms-zoom: 0.9; -moz-transform: scale(0.9); -moz-transform-origin: 0 0; 
-o-transform: scale(0.9); -o-transform-origin: 0 0; -webkit-transform: 
scale(0.9); -webkit- transform-origin: 0 0; 
} --><style>--></style> 

Он прекрасно смотрится на веб-сайте, но это слишком большой для мобильной версии. Если я настрою любой из шкал (с изменением 0,9 до 0,25), это также скажется на исходном сайте. Есть ли способ оставить исходный сайт на 0,9 и изменить его мобильное устройство на .25?

Answer 1

Возможно media query является то, что вы ищете:

@media screen and (max-width : 500px) { 
    #iframeid { 
    -ms-zoom: 0.25; 
    -moz-transform: scale(0.25); 
    -o-transform: scale(0.25); 
    -webkit-transform:scale(0.25); 
    } 
}