CSS3 Transform实践:在手机浏览器中缩放iframe

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

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

由于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从而把其位置摆正确(如图)。给<iframe>添加负值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判断屏幕宽度的容器内。

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

此条目发表在 前端开发 分类目录,贴了 , , 标签。将固定链接加入收藏夹。

CSS3 Transform实践:在手机浏览器中缩放iframe》有 3 条评论

  1. 淘靓吧 说:

    学习了,CSS3还真方便。。。

  2. 邵小妞 说:

    网的边框效果好牛逼啊。。。

  3. 风逐蓝天 说:

    这样的话在ios下是正常了,可是在android中还是不对。有没有什么解决方法?