How to resize an html5 image for mobile

3 Views

I apologize in advance for not figuring out how to format this correctly

I converted a flash swf that contained buttons and very simple action script to an html5 file. I uploaded the .html and put it onto my wordpress website using an iframe code I found online:

Read More
    <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>

It looks fine on the website but is way too big for the mobile version. If I adjust any of the scales (changing .9 to .25) it affects the original site as well. Is there a way I can leave the original site at .9 and have a mobile device change it to .25?

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. Probably media query is what you are looking for:

    @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);  
  }
}