视网膜New iPad与普通分辨率iPad页面的兼容处理
一、这是篇经验分享 就算不是果粉也应该知道，iPad2与new iPad的重大区别之一就是显示屏的分辨率。new iPad显示屏被称之为“视网膜显示屏”，其 设备分辨比 （之前有详细介绍， 点击这里 查看）是iPad2的两倍。 – iPad mini也是普通分辨比。 iPad2与new iPad同时显示一个页面，宽度都是1024像素的，那差别在什么地方呢？——就在于new iPad每个像素点实际上有4倍的普通像素点，如下示意(© smashingmagazine)： 我们使用CSS设置的像素值(px)属于普通像素点，或者称之为标准像素点。 因此，一张200×200尺寸的图片，我们设置如下CSS: img { width: 200px; height: 200px; } 在iPad2或Mini iPad中就是很正常显示的图片；但是，在New iPad中，1个CSS像素点实际上有4个位图像素点，1个分成4个，显然不够分啊，只能颜色 近似选取 ，于是，图片感觉就是模糊的(© smashingmagazine)！ 因此，要想让视网膜屏幕下的图片高清晰显示，我们需要的图片的原始大小不能是200×200像素，而需要2倍高宽，即400×400像素，CSS像素限制依然是： img { width: 200px; height: 200px; } 此时，视网膜屏幕下图片就显示OK了