在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;
}
https://gist.github.com/1778722.js?file=iframe_scale_final.css
需要注意的是以上所有代码都包含在了一个@media判断屏幕宽度的容器内。
针对此类问题如果你有更好的处理方法,欢迎与我交流 🙂
学习了,CSS3还真方便。。。
网的边框效果好牛逼啊。。。
这样的话在ios下是正常了,可是在android中还是不对。有没有什么解决方法?