Question

我使用以下内容缩小iframe中的网页，它适用于普通网页，但如果网页是移动网页（因此只有320px宽），那么我想用-webkit-transform缩小它：规模（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>

我在google搜索了很多内容以获取iframe中加载的页面宽度，尝试计算并将iframe的宽度设置为类似（内容宽度* 0.90）

或者，如果您有任何其他建议？感谢。

Answer 1

如果我正确理解你的目的，我想你想避免在小屏幕上过度缩小（iPhone ??）。

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

快速的谷歌搜索让我看到@ opticswerve的文章here。

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

iframe - 将网页缩小0.30，但将移动网页缩放0.90？

1 个答案: