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

Question

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

我将包含按钮和非常简单的操作脚本的 flash swf 转换为 html5 文件。我使用我在网上找到的 iframe 代码上传了 .html 并把它放到了我的 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），它也会影响原始站点。有没有办法可以让原始站点保持在 0.9 并让移动设备将其更改为 0.25？

Answer 1

您可能正在寻找媒体查询：

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