功能说明：
· 自定义基准页面尺寸
通过为 html 标签添加 data-basewidth 属性来自定义指定基准页面的尺寸。
示例：
<html data-basewidth="750" ></html>· 定义页面内容的字体大小
对于一些符合标准的dpr值（只要是整数，例如：1,2,3），都会为 html 标签再附加一个 data-dpr 属性，然后开发者便可以根据这个属性为条件，实现在不同dpr情况下，对内容字体的大小的调整。
示例代码：
html[data-dpr="1"] .dpr-text{ font-size:12px;}html[data-dpr="2"] .dpr-text{ font-size:24px;}html[data-dpr="3"] .dpr-text{ font-size:36px;}<p class="dpr-text">测试文字</p>相比“响应式方式”JS自动换算无需添加规则，适合于各类型的显示设备。
同样是“缩放” REM方式在缩放的时候，会改变元素的尺寸，而下面要提到的缩放方式，并不会改变元素的原有尺寸，可以理解成只是在视觉上将内容或者页面缩放至与当前显示设备相匹配的尺寸。
这种缩放方式，也可以分为两种类型：
· 通过CSS3的transform对元素进行缩放。· 对viewport进行缩放。首先贴出具体的代码（我已经做好注释）：
function pageScale(opt) { var ua = navigator.userAgent, wp = ua.match(/Windows Phone ([\d.]+)/), android = ua.match(/(Android);?[\s\/]+([\d.]+)?/), dom = document.querySelectorAll(opt.selector), // 获取要缩放的DOM，可以多个。 dw = document.documentElement.clientWidth, // 获取当前显示设备的宽度 dh = document.documentElement.clientHeight, // 获取当前显示设备的高度 pw = opt.width || 320, //获取设计稿的最小尺寸 - 宽度 ph = opt.height || 568, // 获取设计稿的最小尺寸 - 高度 mode = opt.mode || 'cover', // 获取显示模式 origin = opt.origin || 'left top 0', // 设置缩放中心点 ratio = 0, // 定义比值 i = dom.length; // 获取要调整DOM的个数 // 根据模式的不同，从而生成响应的比值，总的来说contain模式只关注宽高中最小的那个。 if (mode == "contain") { if (pw > ph) { ratio = dw / pw; } else { ratio = dh / ph; } } else if (mode == "cover") { // cover模式下，只关注宽高最大的那个。 if (pw < ph) { ratio = dw / pw; } else { ratio = dh / ph; } } else { ratio = dw / pw; } function calcScale(_mode, obj, num) { var _o = obj.style; _o.width = pw + "px"; _o.height = ph + "px"; _o.webkitTransformOrigin = origin; _o.transformOrigin = origin; _o.webkitTransform = "scale(" + num + ")"; _o.transform = "scale(" + num + ")"; // 兼容android 2.3.5系统下body高度不自动刷新的bug if (_mode == "auto" && android) { document.body.style.height = ph * num + "px"; } else if (_mode == "contain" || _mode == "cover") { //因为通过transform进行缩放，并不会导致DOM的重绘，因此就不会改变DOM的原有尺寸，所以在缩放的时候，还是根绝原有尺寸进行缩放，从而导致缩放后位置发生偏移。从而需要定位进行位置的调整。 _o.position = "absolute"; _o.left = (dw - pw) / 2 + "px"; _o.top = (dh - ph) / 2 + "px"; _o.webkitTransformOrigin = "center center 0"; _o.transformOrigin = "center center 0"; // 阻止默认滑屏事件 if (wp) { document.body.style.msTouchAction = "none"; } else { document.ontouchmove = function (e) { e.preventDefault() } } } } // 循环DOM，依次执行缩放计算函数。 while (--i >= 0) { calcScale(mode, dom[i], ratio); }}调用方式：
window.onload = window.onresize = function(){ pageScale({ selector : '.box', //模块的类名 mode : 'cover', // auto || contain || cover width : '320', //默认宽320px height : '568', //默认高568px origin : 'center center 0' //缩放中心点，可选，在contain和cover模式下无效，默认为"left top 0" }) }这种CSS3缩放实现的移动端适配，是我在白树的一篇《pageResponse - 让H5适配移动设备全家》博客中看到的，然后我在其基础上按照自己的理解，进行了小小的修改。
总的来说，想使用 白树 这种缩放的方式，第一步需要准备一个大而且高清的设计稿，比如按照iphone5的 640px*1136px，然后调用方法时，要注意在参数中宽度与高度都要按照最小适配的那个尺寸为起始，例如我这里就是 320px*568px 。尤其要注意的是，如果页面中有插入图，需要将插入图的尺寸调整为 320*568。
具体HTML代码示例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <title>pageResponse</title></head><body> <div class="box"> <img src="demo.jpg" width="320" height="504" alt=""> </div></body></html>viewport缩放，它的大致原理是取当前viewport的deviceWidth值与设计稿的宽进行相除，然后得到两者相差的比例值，再设置meta标签的initial-scale的为这个比例值，从而缩放整个viewport，这种方式的优点在于布局时，完全可以按照PC端方式（可以用px为单位哦）进行布局，并且对于高版本的安卓，通过设置target-densitydpi属性 让其自动调整物理像素与逻辑像素的对应关系。
具体代码如下：
var phoneWidth = parseInt(window.screen.width); // 取得显示设备的逻辑像素，需要注意的是 screen.width方式 可能不准var phoneScale = 680 / phoneWidth;var ua = navigator.userAgent;if (/Android (\d+\.\d+)/.test(ua)) { var version = parseFloat(RegExp.$1); // andriod 2.3到4.0 if ((version > 2.3) && (version < 3.0)) { document.write('<meta name="viewport" content="width=680, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ',user-scalable=no,target-densitydpi=device-dpi">'); } else { // andriod 2.3一下那完全不需要 谁特么还用那么老的东西？！ document.write('<meta name="viewport" content="width=680, user-scalable=no, target-densitydpi=device-dpi">'); } // 其他系统} else { document.write('<meta name="viewport" content="width=680, user-scalable=no, target-densitydpi=device-dpi">');}总的说，缩放方式实际上有一种缺陷，那就是ios系统会出现元素显示区域与实际元素所在区域有一定的偏移，影响文本、图片的查看和复制，微信中无法识别二维码。在没有文本复制和识别二维码的页面时可以用这种方法。
联系客服
