使用transform:scale缩放页面，要求视觉稿高清
3 |页面以px为单位即可让h5适配各种移动设备，适配原则根据视觉稿比例缩放页面
4 |告别rem、媒体查询、百分比等相对复杂且定位不精准的布局
5 |兼容性良好，支持ios4+、android2.3+、winphone8+系统
6 |约1k，零依赖
7 |三种适配模式可选 auto || contain || cover
8 |真实案例：超级收银员
9 |
保持页面的宽高比，调整页面的宽度，使页面宽度完全包含在浏览器窗口中
31 | 预览 32 |
meta的viewport设置：
40 |<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">41 |
启用插件代码示例一：
42 |43 | <div class="page"> 44 | <img src="img/demo1.jpg" alt="" width="320" height="504"> 45 | <h1>你一定也有过一个翱翔天际的梦1</h1> 46 | <p>- 回家，或踏上旅途，飞机是自由的符号 -</p> 47 | </div> 48 |49 |
50 | //如果视觉稿尺寸是640px*1008px，页面样式是以视觉稿尺寸除以2来计算，那么输入页面的宽度为320px和高度为504px
51 | window.onresize = function(){
52 | pageResponse({
53 | selectors : '.page', //模块选择器，使用querySelectorAll的方法
54 | mode : 'contain', // auto || contain || cover
55 | width : '320', //输入页面的宽度，只支持输入数值，默认宽度为320px
56 | height : '504' //输入页面的高度，只支持输入数值，默认高度为504px
57 | })
58 | }
59 | document.addEventListener("DOMContentLoaded", function() {
60 | pageResponse({
61 | selectors : '.page', //模块选择器，使用querySelectorAll的方法
62 | mode : 'contain', // auto || contain || cover
63 | width : '320', //输入页面的宽度，只支持输入数值，默认宽度为320px
64 | height : '504' //输入页面的高度，只支持输入数值，默认高度为504px
65 | })
66 | }
67 |
68 | 启用插件代码示例二：
69 |70 | <!-- 2个模块（包含隐藏的）都包含class:page，pageResponse可对这2个模块起作用 -->81 |
71 | <div class="page"> 72 | <img src="img/demo1.jpg" alt="" width="640" height="1008"> 73 | <h1>你一定也有过一个翱翔天际的梦1</h1> 74 | <p>- 回家，或踏上旅途，飞机是自由的符号 -</p> 75 | </div> 76 | <div class="page hide"> 77 | <p>是否还记得她</p> 78 | <img src="img/logo.jpg" alt="" width="40" height="40"> 79 | </div> 80 |
82 | //如果视觉稿尺寸是640px*1008px，页面样式是以视觉稿原始尺寸来计算，那么输入页面的宽度为640px和高度为1008px
83 | window.onresize = function(){
84 | pageResponse({
85 | selectors : '.page', //模块选择器，使用querySelectorAll的方法
86 | mode : 'contain', // auto || contain || cover
87 | width : '640', //输入页面的宽度，只支持输入数值，默认宽度为320px
88 | height : '1008' //输入页面的高度，只支持输入数值，默认高度为504px
89 | })
90 | }
91 | document.addEventListener("DOMContentLoaded", function() {
92 | pageResponse({
93 | selectors : '.page', //模块选择器，使用querySelectorAll的方法
94 | mode : 'contain', // auto || contain || cover
95 | width : '640', //输入页面的宽度，只支持输入数值，默认宽度为320px
96 | height : '1008' //输入页面的高度，只支持输入数值，默认高度为504px
97 | })
98 | }
99 |
100 |
--------------------------------------------------------------------------------
/css/index.css:
--------------------------------------------------------------------------------
1 | /* ============================================================
2 | 样式重置
3 | ============================================================ */
4 | body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td{margin:0;padding:0;}
5 | h1,h2,h3,h4,h5,h6{font-size:100%;}
6 | ul,dl,ol{list-style:none;}
7 | img,fieldset,input[type="submit"]{border:0 none;}
8 | img{display:inline-block;overflow:hidden;vertical-align:top;}
9 | em{font-style:normal;}
10 | strong{font-weight:normal;}
11 | table{border-collapse:collapse;border-spacing:0;}
12 | button,input[type="button"]{cursor:pointer;border:0 none;}
13 | menu{margin:0;padding:0;}
14 | body{-webkit-user-select:none;-webkit-text-size-adjust:none!important;font-family:Helvetica;}
15 | input[type="number"]{-webkit-user-select:text;}
16 | a,button,input,img{-webkit-touch-callout:none;}/
17 | input,select,textarea{outline:none;}
18 | html,body{height:100%;}
19 | a{text-decoration:none;}
20 |
21 | /* ============================================================
22 | 页面内容
23 | ============================================================ */
24 | /*框架*/
25 | body{overflow: hidden;}
26 | .page-wrap{overflow:hidden}
27 | .page{display:none;width:100%;height:100%;overflow:hidden;position:absolute;top:0;left:0}
28 | .content{width:100%;height:100%;display:none;position:relative;z-index:0}
29 | .current .content,.slide .content{display:block}
30 | .current{display:block;z-index:1}
31 | .slide{display:block;z-index:2}
32 | .swipe{display:block;z-index:3;transition-duration:0ms!important;-webkit-transition-duration:0ms!important}
--------------------------------------------------------------------------------
/img/demo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peunzhang/pageResponse/e2198144a02dee33baeb3fa3d9d9ea452ccd0baa/img/demo.jpg
--------------------------------------------------------------------------------
/img/demo0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peunzhang/pageResponse/e2198144a02dee33baeb3fa3d9d9ea452ccd0baa/img/demo0.png
--------------------------------------------------------------------------------
/img/demo1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peunzhang/pageResponse/e2198144a02dee33baeb3fa3d9d9ea452ccd0baa/img/demo1.png
--------------------------------------------------------------------------------
/img/demo2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/peunzhang/pageResponse/e2198144a02dee33baeb3fa3d9d9ea452ccd0baa/img/demo2.png
--------------------------------------------------------------------------------
/js/pageResponse.js:
--------------------------------------------------------------------------------
1 | /*
2 | * 名称 ：移动端响应式框架
3 | * 作者 ：白树 http://peunzhang.cnblogs.com
4 | * 版本 ：v2.1
5 | * 日期 ：2015.10.13
6 | * 兼容 ：ios 5+、android 2.3.5+、winphone 8+
7 | */
8 | function pageResponse(opt) {
9 | var ua = navigator.userAgent,
10 | wp = ua.match(/Windows Phone ([\d.]+)/),
11 | android = ua.match(/(Android);?[\s\/]+([\d.]+)?/),
12 |
13 | // 设备宽高初始比例
14 | dw = document.documentElement.clientWidth,
15 | dh = document.documentElement.clientHeight,
16 | ds = dw / dh,
17 |
18 | // 页面宽高初始比例
19 | pw = opt.width || 320,
20 | ph = opt.height || 504,
21 | ps = pw / ph,
22 |
23 | // 调用的选择器
24 | pd = document.querySelectorAll(opt.selectors),
25 | i = pd.length,
26 |
27 | // 核心代码：页面缩放比例
28 | sm = opt.mode || "auto",
29 | or = opt.origin || "left top 0",
30 | sn = (sm == "contain") ? (ds > ps ? dh / ph : dw / pw) : (sm == "cover") ? (ds < ps ? dh / ph : dw / pw) : dw / pw;
31 |
32 | //样式模板 auto || contain || cover
33 | function template(mode, obj, num) {
34 | var _o = obj.style;
35 | _o.width = pw + "px";
36 | _o.height = ph + "px";
37 | _o.webkitTransformOrigin = or;
38 | _o.transformOrigin = or;
39 | _o.webkitTransform = "scale(" + num + ")";
40 | _o.transform = "scale(" + num + ")";
41 | // 兼容android 2.3.5系统下body高度不自动刷新的bug
42 | if (mode == "auto" && android) {
43 | document.body.style.height = ph * num + "px";
44 | } else
45 | if (mode == "contain" || mode == "cover") {
46 | _o.position = "absolute";
47 | _o.left = (dw - pw) / 2 + "px";
48 | _o.top = (dh - ph) / 2 + "px";
49 | _o.webkitTransformOrigin = "center center 0";
50 | _o.transformOrigin = "center center 0";
51 | // 阻止默认滑屏事件
52 | if (wp) {
53 | document.body.style.msTouchAction = "none";
54 | } else {
55 | document.ontouchmove = function(e) {
56 | e.preventDefault()
57 | }
58 | }
59 | }
60 | }
61 |
62 | //运行
63 | while (--i >= 0) {
64 | template(sm, pd[i], sn);
65 | }
66 | }
67 | module.exports = pageResponse;
68 | /* 使用方法
69 | * window.onresize = function(){
70 | * pageResponse({
71 | * selectors : '输入类名', //模块的类名
72 | * mode : 'contain', // auto || contain || cover
73 | * width : '320', //默认宽320px
74 | * height : '504', //默认高504px
75 | * origin : 'center center 0' //缩放中心点，可选，在contain和cover模式下无效，默认为"left top 0"
76 | * })
77 | * }
78 | * document.addEventListener("DOMContentLoaded", function() {
79 | * pageResponse({
80 | * selectors : '输入类名', //模块的类名
81 | * mode : 'contain', // auto || contain || cover
82 | * width : '320', //默认宽320px
83 | * height : '504', //默认高504px
84 | * origin : 'center center 0' //缩放中心点，可选，在contain和cover模式下无效，默认为"left top 0"
85 | * })
86 | * }
87 | */
--------------------------------------------------------------------------------
/js/pageResponse.min.js:
--------------------------------------------------------------------------------
1 | /*
2 | * 名称 ：移动端响应式框架
3 | * 作者 ：白树 http://peunzhang.cnblogs.com
4 | * 版本 ：v2.1
5 | * 日期 ：2015.10.13
6 | * 兼容 ：ios 5+、android 2.3.5+、winphone 8+
7 | */
8 | function pageResponse(d){var c=navigator.userAgent,o=c.match(/Windows Phone ([\d.]+)/),e=c.match(/(Android);?[\s\/]+([\d.]+)?/),b=document.documentElement.clientWidth,n=document.documentElement.clientHeight,g=b/n,q=d.width||320,l=d.height||504,a=q/l,m=document.querySelectorAll(d.selectors),k=m.length,h=d.mode||"auto",j=d.origin||"left top 0",f=(h=="contain")?(g>a?n/l:b/q):(h=="cover")?(g
30 | - 回家，或踏上旅途，飞机是自由的符号 -
32 |
30 | - 回家，或踏上旅途，飞机是自由的符号 -
32 |
30 | - 回家，或踏上旅途，飞机是自由的符号 -
32 |
51 | 
57 | 
63 |