标签：
最近，移动开发项目中关于图表的部分，我们采用了highcharts，但是在为了让大部分机型都能够完美适配，还是仔细的研究了一番。
首先研究的就是淘宝的首页，淘宝的层叠样式表，大多采用的单位是rem，这是css3引入新的字体尺寸单位，相对于根节点计算像素的。
比如<html style="font-size:40px;">，同时<meta name="viewport“ content="width=device-width, initial-scale=1">那么其他元素诸如<div style="width:1rem;height:1rem;background:red"></div>实际显示就是40px;
但是这个根节点设置多少是合适的呢，缩放大小怎么与之匹配呢，对于一张640的设计图，每个元素的宽高怎么计算才合情理呢。为了让不同设备显示相同的效果，我们看看不同设备有什么区别，其中一个元素就是dp（设备独立像素），window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
在使用<meta name="viewport“ content="width=device-width">布局的情况下，所有非视网膜屏的手机在竖直状态时，宽度为320物理像素，独立像素也是320，因此window.devicePixelRatio=1，然而在视网膜屏的手机，如iphone5s，竖直状态时，宽度为640物理像素，独立像素还是320，因此window.devicePixelRatio=2。
这样，我们就需要在不同的设备中去计算不同的font-size，首先我们看这样一段代码
var browser = {
versions: function () {
var u = navigator.userAgent, app = navigator.appVersion;
return {
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf(‘Android‘) > -1 || u.indexOf(‘Linux‘) > -1,
iPhone: u.indexOf(‘iPhone‘) > -1 || u.indexOf(‘Mac‘) > -1,
iPad: u.indexOf(‘iPad‘) > -1,
webApp: u.indexOf(‘Safari‘) == -1
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
};
(function(doc, win) {
console.log("ffffffff");
var docEl = doc.documentElement;
var dpr,scale;
if (browser.versions.android) {
dpr = 1;
} else {
dpr = window.devicePixelRatio || 1;
}
rem = docEl.clientWidth * dpr / 32;
scale = 1 / dpr,
metaEl = document.querySelector(‘meta[name="viewport"]‘),
resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
recalc = function () {
if (!rem) return;
docEl.style.fontSize = rem + ‘px‘;
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
metaEl.setAttribute(‘content‘, ‘width=‘ + dpr * docEl.clientWidth + ‘,initial-scale=‘ + scale + ‘,maximum-scale=‘ + scale + ‘,minimum-scale=‘ + scale + ‘,user-scalable=no‘);
docEl.setAttribute(‘data-dpr‘, dpr);})(document, window)
这段代码是在淘宝大神那里找到的，网上很多适配也大多是这样一个思路，假如设计稿640(640/32=20)，同时scale=1，那么，整个设计稿宽度相当于32rem，如果我有一个dom宽度为整个屏幕的一半，如oDiv{width：16rem}，根据根节点的基准，计算出在当前设备上应当显示的像素值，同时设置当前设备的宽度为dpr * docEl.clientWidth，docEl.clientWidth获取的是设备的宽，乘以dpr得到的是设备的物理像素。
在不同设备上的效果如下
更多viewport信息参考：http://www.cnblogs.com/koukouyifan/p/4066567.html
http://www.cnblogs.com/2050/p/3877280.html
标签：
原文地址：http://www.cnblogs.com/sakurakitty/p/4898046.html
