0

我使用以下内容来缩小 iframe 中的网页，它适用于普通网页，但如果网页是移动网页（因此只有 320px 宽），那么我想使用 -webkit-transform 来缩小它： scale( 0.90); 而不是 0.30。

<div id="iframewrap">
    <iframe id="iframeid" src="http://www.mypage.com" name="iframeName" marginwidth="0" marginheight="0" scrolling="yes" frameborder="0" height="100%"></iframe>
</div>   


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

我已经尝试了很多东西，从谷歌搜索获取加载到 iframe 中的页面宽度，尝试计算 iframe 的宽度并将其设置为（内容宽度 * 0.90）

或者如果您有其他建议？谢谢。

4

1 回答 1

0

如果我正确理解您的目的，我认为您想避免在小屏幕（iPhone ??）上缩小太多。

您可以使用@media查询来查找设备像素比率并为它们编写覆盖 CSS 类。

一个快速的谷歌搜索让我找到了@opticswerve 的文章。

编辑：如果您想使用设备设备最大宽度@media查询仍然会有所帮助，如此处的 stackoverflow 问题所述。

于 2012-12-03T12:53:12.010 回答