;(function(win, lib) {
var doc =
win.document;
var docEl =
doc.documentElement;
var metaEl = doc.querySelector(
'meta[name="viewport"]');
var flexibleEl = doc.querySelector(
'meta[name="flexible"]');
var dpr =
0;
var scale =
0;
var tid;
var flexible = lib.flexible || (lib.flexible =
{});
if (metaEl) {
console.warn('将根据已有的meta标签来设置缩放比例');
var match = metaEl.getAttribute(
'content').match(/initial\-scale=([\d\.]+)/
);
if (match) {
scale = parseFloat(match[
1]);
dpr = parseInt(
1 /
scale);
}
} else if (flexibleEl) {
var content = flexibleEl.getAttribute(
'content');
if (content) {
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/
);
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/
);
if (initialDpr) {
dpr = parseFloat(initialDpr[
1]);
scale = parseFloat((
1 / dpr).toFixed(
2));
}
if (maximumDpr) {
dpr = parseFloat(maximumDpr[
1]);
scale = parseFloat((
1 / dpr).toFixed(
2));
}
}
}
if (!dpr && !
scale) {
var isAndroid = win.navigator.appVersion.match(/android/
gi);
var isIPhone = win.navigator.appVersion.match(/iphone/
gi);
var devicePixelRatio =
win.devicePixelRatio;
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >=
3 && (!dpr || dpr >=
3)) {
dpr =
3;
} else if (devicePixelRatio >=
2 && (!dpr || dpr >=
2)){
dpr =
2;
} else {
dpr =
1;
}
} else {
// 其他设备下，仍旧使用1倍的方案
dpr =
1;
}
scale =
1 /
dpr;
}
docEl.setAttribute('data-dpr', dpr);
if (!
metaEl) {
metaEl = doc.createElement(
'meta');
metaEl.setAttribute('name',
'viewport');
metaEl.setAttribute('content',
'initial-scale=' + scale +
', maximum-scale=' + scale +
', minimum-scale=' + scale +
', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement(
'div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
}
function zoom(rem, width){
var rate = rem/
12;
//0.625
var inRate =
12/rem;
//16
var oFlexContainer = document.getElementById(
'flexContainer');
oFlexContainer.style.webkitTransform =
'scale('+rate+
')';
var height =
oFlexContainer.offsetHeight;
oFlexContainer.style.width = width*inRate+
'px';
oFlexContainer.style.fontSize =
168+
'px';
oFlexContainer.style.marginLeft = -(
1-rate)/
2*(width*inRate) +
'px';
oFlexContainer.style.marginTop = -(
1-rate)/
2*height +
'px';
// console.log(height)
// console.log(width*inRate)
}
function refreshRem(){
var width =
docEl.getBoundingClientRect().width;
if (width / dpr >
540) {
width =
540 *
dpr;
}
var rem = width /
750;
// console.log(width)
if(document.getElementById(
'flexContainer')){
var height = document.getElementById(
'flexContainer').getBoundingClientRect().height;
if(rem <
12){
zoom(rem, width, height)
}
}else{
console.warn('warn：Please write ID elements for flexContainer for container!');
}
docEl.style.fontSize = rem +
'px';
flexible.rem = win.rem =
rem;
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem,
300);
}, false);
win.addEventListener('pageshow', function(e) {
// if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem,
300);
// }
},
false);
if (doc.readyState ===
'complete') {
doc.body.style.fontSize =
12 * dpr +
'px';
} else {
doc.addEventListener('DOMContentLoaded', function(e) {
doc.body.style.fontSize =
12 * dpr +
'px';
}, false);
}
refreshRem();
flexible.dpr = win.dpr =
dpr;
flexible.refreshRem =
refreshRem;
flexible.rem2px =
function(d) {
var val = parseFloat(d) *
this.rem;
if (
typeof d ===
'string' && d.match(/rem$/
)) {
val +=
'px';
}
return val;
}
flexible.px2rem =
function(d) {
var val = parseFloat(d) /
this.rem;
if (
typeof d ===
'string' && d.match(/px$/
)) {
val +=
'rem';
}
return val;
}
})(typeof window !==
"undefined" ? window :
this, window[
'lib'] || (window[
'lib'] = {}));
使用文档：jcFlexible是根据手淘前端团队的flexible框架改写的一套框架，实现了不需要less编译的一套移动端样式的适配使用须知：1.需要引入jcFlexible.js2.创建一个id为flexContainer的div作为container3.所有dom元素都要写在container里面4.所有元素都用rem代替px（以设计图为准：例如设计图为750px，一个div标注200px，则设置css为200rem）5.可根据dpr来适配不同物理像素图片使用如下[data-dpr="1"] .selector{}6.因为对元素进行了特殊处理，项目中不能用px，像素的大小和rem转化手册：10px = 120rem12px = 144rem 14px = 168rem 16px = 192rem 18px = 216rem 20px = 240rem 22px = 265rem 24px = 289rem 26px = 313rem正常大小约为1px ＝ 12rem，精准几乎可以忽略不计
转载于:https://www.cnblogs.com/jcscript/p/5833701.html
相关资源：PDF.js 解析PDF文件demo
