移动端开发 经典坑 第一弹

问题1.retina下图片的高清的问题

解决：两倍图片

举例：200*300 css pixel 的img标签，要提供 400*600 的图片。  -- 这样位图像素点的个数就是原来的四倍，在retina下，位图像素点个数就可以跟物理像素点个数形成 1：1的比例。

缺点：1）普通屏幕下，同样下载了2倍大小的图片  2）由于downsampling 会失去锐利度

完美解决办法： 不同的dpr下，加载不同尺寸的图片，（通过css媒体查询，js判断都可以）

准备两套图片通过url参数控制图片的质量。

示例：

如，这样一张原图：

https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg // 原图

可以类似这样，进行图片裁剪：
// 200×200

https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_200x200.jpg

// 100×100

https://img.alicdn.com/tps/TB1AGMmIpXXXXafXpXXXXXXXXXX.jpg_100x100.jpg

(ps: 当然裁剪只是对原图的等比裁剪，得保证图片的清晰嘛~)

 

问题2 reatina下 border：1px的问题

解决：页面的scale的方案，对于dpr = 2的retian屏幕，

<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no">

这样将页面中所有的 border：1px 都缩小0.5，从而达到了border：0.5px 的效果

缺点：1.字体的大小 和页面的元素会被缩放？？？

 

问题3 多屏适配布局问题

解决：rem 概念略

示例：rem = document.documentElement.clientWidth * dpr / 10

具体：1.通过css 媒体查询的方案  -- 不够精确，具体略

2.js计算

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
scale = 1 / dpr;
dpr = win.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
// 设置viewport，进行缩放，达到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ',
  minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性，留作的css hack之用
docEl.setAttribute('data-dpr', dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
// 给js调用的，某一dpr下rem和px之间的转换函数
window.rem2px = function(v) {
    v = parseFloat(v);
    return v * rem;
};
window.px2rem: function(v) {
    v = parseFloat(v);
    return v / rem;
};
window.dpr = dpr;
window.rem = rem;

优点：

1.解决了border：1px问题，2.解决了图片高清问题， 3. 屏幕