banner图，在真机苹果6s上和android机上测试不一致

来源：6-9 如何实现响应式图片-响应式广告具体实现

ZainZy

2016-08-24

苹果6S真机测试banner广告图显示的是x800的图片，不是480的图片。用安卓机测试是正常的x480的图片。请问老师这种问题应该从哪方面着手解决呢。

写回答

2回答

ZainZy

提问者

2016-08-29

好的，谢谢老师。我下来看看

姜维

2016-08-25

<picture>
    <source srcset="img/ad001-l.png" media="(min-width:50em)">
    <source srcset="img/ad001-m.png" media="(min-width:30em)">
    <img src="img/ad001.png" alt="xxx">
</picture>

你的问题非常好，注意上面的代码，如果在picture中使用相对单位，其实是有兼容性问题的：

在safari等浏览器中，会根据 html 中设置的字体大小来计算，在我们的例子里，是根据 font-size: 62.5%计算，也就是 1em=10px；

在chrome等浏览器中，会根据浏览器设置的自己大小来计算，在我们的例子里，是根据 font-size: 100%计算，也就是 1em = 16px；

考虑到兼容性，可以选择使用绝对单位。

响应式开发一招致胜

用一套代码开发出不受设备型号、尺寸限制的互联网金融网站

4021 学习 · 752 问题

查看课程

相似问题

老师移动端怎么设置啊，那个IP地址手机连接不上

回答 1

为什么加上owl-carousel，图片就显示不出来

回答 2

手机兼容性问题

回答 1

手机扫码浏览写的网站，可是显示有问题，在电脑上各种分辨率都是好的为什么呢

回答 2

开启browser-sync服务后没有url提供访问，不能再手机端测试

回答 1

打开慕课网App查看更多内容