已更新 - 强力推荐 (移动端自适应解决方案与仿原生APP超高清超细腻解决方案)

https://gitlab.com/fekits/mc-ratio

v1.1.0 [Latest version]

1、新增了dpr功能，开启了DPR功能后，可以自动设置设备尺寸为物理分辨率使网页达到原生APP精细效果。就是解决经典的1px太粗问题
2、新增了fixed参数可以设置字号缩放时的小数字精度。

image.png

首先仍然先上DEMO，这个DEMO开启了DPR功能，请注意看1px线条粗细度与清晰度，因没有足够的老机型，目前并未发现DPR功能开启后有兼容问题，希望更多的人帮忙测试一下，目前测试机有iphone5s,iphone6s,iphone7s Plus,iphone4,小米(未注意型号)，魅族(未注意型号安卓4.4.4)，三星S9+，小米note2，小米6，如果您发现了任何题麻烦你剪屏联系我，谢谢！

http://fekit.asnowsoft.com/plugins/mc-ratio/index.html

// 复制这一段放在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头部即可=========