现在位置首页 / 项目实战 /正文

【转载】在手机浏览器中缩放iframe

作者: IT小兵 | 2014年4月28日| 热度:℃ | 评论: |参与:

在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;
}


#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;
}

view raw iframe_scale_final.css This Gist brought to you by GitHub. 

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


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询