Question

我提前道歉没有弄清楚如何正确格式化

我将包含按钮和非常简单的动作脚本的flash swf转换为html5文件。我上传了.html并使用我在网上找到的iframe代码将其放到我的wordpress网站上：

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

它在网站上看起来不错，但对移动版来说太大了。如果我调整任何比例（改变.9到.25），它也会影响原始站点。有没有办法可以将原始网站保留在.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);  
  }
}

如何为移动设备调整html5图像的大小

1 个答案: