RATIO.JS 移动端自适应方案

已更新 - 强力推荐 (移动端自适应解决方案与仿原生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-...