已更新 – 强力引荐 (挪动端自适应处理方案与仿原生APP超高清超细致处理方案)
https://gitlab.com/fekits/mc-…

v1.1.0 [Latest version]

1、新增了dpr功用，开启了DPR功用后，能够自动设置装备尺寸为物理分辨率使网页到达原生APP邃密结果。就是处理典范的1px太粗题目

2、新增了fixed参数能够设置字号缩放时的小数字精度。

起首依然先上DEMO，这个DEMO开启了DPR功用，请注重看1px线条粗细度与清晰度，因没有充足的老机型，现在并未发明DPR功用开启后有兼容题目，现在测试机有iphone5s,iphone6s,iphone7s Plus,iphone4,小米(未注重型号)，魅族(未注重型号安卓4.4.4)，如果您发明了任何题贫苦你剪屏联络我，感谢！

http://www.junbo.name/plugins…

// 复制这一段放在HTML头部即可=========

<script>

"use strict";function ratio(){var n=0<arguments.length&&void 0!==arguments[0]?arguments[0]:{},d=document.documentElement,l=n.el||d,o=n.size[0],c=n.size[1]/o,a=n.full,e=function(){n.dpr&&document.getElementsByName("viewport")[0].setAttribute("content","width=device-width,initial-scale=1,minimum-scale="+1/window.devicePixelRatio+",maximum-scale="+1/window.devicePixelRatio+",user-scalable=no");var e,i=d.clientWidth,t=d.clientHeight;e=(e=a&&t/i<c?t/c/o:i/o).toFixed(3),l.style.fontSize=100*e+"px",n.then&&n.then(e)};e(),window.addEventListener("resize",e)}

ratio({

size: [750, 1334],      // 设想稿的尺寸

full:1,     // 开启全屏形式，将对宽度和高度双向自适应缩放，这类形式平常用于无转动条的全屏页面。

dpr:true,    // 开启DPR功用，该功用开启后页面尺寸转为装备物理分辨率尺寸，UI细致水平到达APP原生级别，比方处理典范的1px太粗题目

fixed:0    // 设置字号精度为小数点后0位, 发起开启dpr时，fixed设置为0,能够到达元素现实尺寸无小数点从而到达高清结果，1px占一格物理像素。 

});

</script>

// 写尺寸划定规矩：一切尺寸写设想稿尺寸／100，比方设想稿宽600px写width:6rem,设想稿字号28px写fint-size:.28rem;// 复制这一段放在HTML头部即可=========

以下为v1.0.0版本

RATIO.JS运用简朴复制粘帖即用。亮点：全屏形式可开启宽高双向自适应！

先看结果:http://junbo.name/plugins/ratio/ 发起翻开调试台运用挪动端形式检察，前端都懂的！

全屏页面运用示例：

// 复制这一段放在HTML头部即可=========

function ratio(i){var c=document.documentElement,l=i.el||c,o=i.size[0],s=i.size[1]/o,d=i.full,e=function(){var e,t=c.clientWidth,n=c.clientHeight;e=d&&n/t<s?n/s/o:t/o,l.style.fontSize=100*e+"px",i.then&&i.then(e)};e(),window.addEventListener("resize",e)}

// size:[设想稿宽度，设想稿高度] 请疏忽缩放倍率，设想稿是若干就写若干   full:ture开启宽度双向自适应（适应于全屏页面），false仅开启宽度自适应（适应于转动页面）

ratio({size: [750, 1334], full:1});

// 写尺寸划定规矩：一切尺寸写设想稿尺寸／100，比方设想稿宽600px写width:6rem,设想稿字号28px写fint-size:.28rem;

// 复制这一段放在HTML头部即可=========

转动页面运用示例：

ratio({size: [750, 1334], full:0}); // full改成false或0或不写

gitlab网址：https://gitlab.com/fekits/mc-…