html scale 缩放iframe,CSS3 Transform实践：在手机浏览器中缩放iframe

在App每日推送的网站中，我们使用了百度广告管家来控制网站广告的投放。其提供的代码通过js写了一段来显示广告，这在电脑以及iPad上是没有问题的，但在手机上的显示却产生了一些问题。

框架在手机版网页中的问题

由于App每日推送专门针对iPhone设计了布局，侧栏宽度较原尺寸做了缩小，而iframe代码被固定了宽度，所以在手机中显示成了溢出(如图一)。

可能很多朋友的第一反应就是在css里给iframe强制设定宽和高。其实在这样设定后，框架的尺寸是缩小了，但框架里的内容却没有缩放，所以广告图片会只露出一小部分来。

使用CSS3 Transform缩放iframe

由于问题只存在于手机端，所以用CSS3的transform:scale属性来解决就变得非常可行。transform:scale属性在不改变元素在文档流中所占空间的前提下，对元素的显示进行放大或缩小。因此，只要把iframe框架缩放到合适大小，再通过负值margin把iframe容器挪到合适的位置使其不溢出即可。

首先，使用transform:scale(0.6);把框架缩小到0.6倍大小，然后通过transform-origin:100% 100%;让缩放在右下角对齐。

#content_sub iframe {

-webkit-transform: scale(0.6);

-webkit-transform-origin: 100% 100%;

}

如果不使用右下角对齐，比如使用默认的居中缩放，那么通过负值margin移动位置后，元素右侧还会占有空间。“transform:scale”只缩放显示效果，并不影响元素的width、height值。

使用这段代码后，iframe内容进行了右下角对齐的缩放(如图二)。

由于元素实际上还是占用了和桌面浏览器中一样的尺寸，所以需要在不脱离文档流的前提下把元素位置向左上挪，负值margin是最好的选择。(注：当然你也可以让它脱离文档流，比如给容器添加position:relative;并固定高度，再给iframe的容器分别设定绝对定位和位置，但是这样太麻烦了)

在百度广告管家生成的代码中，iframe外层还有一个div容器，给它添加负值margin从而把其位置摆正确(如图)。给添加负值margin无效。

#iframe_wrap {

margin-left: -95px;

margin-top: -40px;

}

到这里，无论是iPhone还是PC浏览器，都可以看到一样的效果了(如图三)。

最后，我对代码做了一下小调整，通过css3的新选择器让缩放效果只对百度广告管家的iframe生效。

#content_sub iframe[id^="baidu_clb"] {

-webkit-transform: scale(0.6);

-webkit-transform-origin: 100% 100%;

}

#content_sub div[id^="baidu_clb"] {

margin-left: -95px;

margin-top: -40px;

}

需要注意的是以上所有代码都包含在了一个@media判断屏幕宽度的容器内。

针对此类问题如果你有更好的处理方法，欢迎与我交流 🙂