移動端開發 經典坑 第一彈

問題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. 屏幕