h5手机图片适配的问题

参考:http://mdsa.51cto.com/art/201507/484215.htm
基于http://www.jianshu.com/p/7179c36a682f
我们知道,同样的100px*100px的图片在bybrid软件以及大部分wap网页中是以
100dpr*dpr的像素大小来呈现的。
同样的100
100的图片,在retina屏幕中,1像素的位图对应4像素的物理像素,这种情况下,会就近取色

Paste_Image.png

这样会造成模糊

所以对于高清图片,为了避免就近取色,导致图片模糊,比较好的方法是采用两倍图片的方式。
如果在普通屏幕下用两倍图片,200×300(css pixel)img标签,所对应的物理像素个数就是200×300个,而两倍图片的位图像素个数则是200×300*4,所以就出现一个物理像素点对应4个位图像素点,所以它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之一,我们称这个过程叫做downsampling),肉眼看上去虽然图片不会模糊,但是会觉得图片缺少一些锐利度,或者是有点色差(但还是可以接受的)。


Paste_Image.png

对于不同手机屏幕下载不同尺寸的图片可以通过媒体查询做到:@media
通过不同的URl使图片尺寸在服务器端处理。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 上篇文章 讲到了我对设备像素比的理解,但在写文章的过程中,也一直有一个疑惑的地方:为什么在 Retina 屏下需要...
    柏丘君阅读 12,450评论 1 5
  • 刚开始做移动端web开发的同学应该都碰到过页面适配问题,为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...
    留七七阅读 19,618评论 5 80
  • 这是个寒冷的下午,回校途中的我正在大巴上晕的要死。 岁末的寒意与雾气常让我想起热腾腾的饭菜,而后不自觉的臆想出身上...
    沣佬阅读 2,523评论 0 1
  • 文/浅茉轻语 很多时候 我们会有那么点疑惑 为什么,明明废力了,花心思了 结果,却还是不近人意 其实,承认吧 你做...
    字若黎光阅读 984评论 0 18