月归档:八月 2011

看图猜浏览器

从Reddit看到的,来猜猜看吧~从上往下依次是⋯⋯国人如果答不上最后一个,可真是对不起最年轻少将、空姐、相信奇迹的发言人啊。

发表在 不想分类 | 标签为 | 29 条评论

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判断屏幕宽度的容器内。 针对此类问题如果你有更好的处理方法,欢迎与我交流 🙂

发表在 前端开发 | 标签为 , , | 3 条评论