Vern Blog
0%

基于原生JS移动端响应式解决方案——AUTOSTRAP

Posted on Edited on In

介绍就目前移动端而言，已有比较成熟都响应式框架，类似于Bootstrap、AmazeUI、Skeljs。但是对于普通开发者来说，为了满足快速开发的需求去学习和使用这些框架的时间成本是比较高的。所以，本着轻量、快速开发的原则，为大家提供了基于原生JS的移动动端解决方案，希望能在交流、使用中继续优化AutoStrap。

原理目前我们熟悉的开源前端框架都是栅格化布局，通过mediaQuery，在不同分辨率加载不同的css达到响应式的效果。同时还提供了诸多的JS组件供开发者使用。而AutoStrap是使用viewport，以iPhone4分辨率为模板，根据可视宽高调节缩放比例实现。具体内容下面的代码会给出。

代码autostrap.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

/*!
 * AutoStrap v1.0.0 (http://largesoft.org)
 * Copyright 2015 Vern, Inc.
 */
var g = document.documentElement.clientWidth,
    h = document.documentElement.clientHeight,
    clientWidth = document.documentElement.clientWidth,
    viewport = document.getElementById("MobileViewport");
function isWeixin() {
    var a = navigator.userAgent.toLowerCase();
    return "micromessenger" == a.match(/MicroMessenger/i) ? ! : !
}
function renderPage() {
    var f = ;
    g / h >=  /  ? (f = g / ) : (f = g / );
    if(g == ){
        f = ;
    }
    viewport.content = "width=320, initial-scale=" + f + ", maximum-scale=" + f + ", user-scalable=no";
    if ( != clientWidth && clientWidth == document.documentElement.clientWidth ||
     isWeixin() && (navigator.userAgent.indexOf("Android") > -1 ||
      navigator.userAgent.indexOf("Linux") > -1)) {
        var i =  / g,
            j =  / h,
            k = Math.max(i, j);
        k = k >  ? k :  * k, k = parseInt(k), viewport.content= "width=320, target-densitydpi=" + k ;
    }
}
renderPage();

autostrap.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
/*!
 * AutoStrap v1.0.0 (http://largesoft.org)
 * Copyright 2015 Vern, Inc.
 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin:;
  padding:;
  border:;
  outline:;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height:;
  background-color: rgba(, );
}
body * {
  max-width: 320px !important;
  font-family: "microsoft yahei";
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline:;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing:;
}
hr {
  margin-top: 5px;
  margin-bottom: 5px;
  border:;
  border-top: 1px dashed #eee;
}

html页面引入代码

1
2
3
4
5
6
<meta
  id="MobileViewport"
  name="viewport"
  content="width=320, initial-scale=1, maximum-scale=1, user-scalable=no"
  servergenerated="true"
/>

使用1、页面引入autostrap.js、autostrap.css文件
2、在标签里面加入以下代码

1
2
3
4
5
6
7
8
9
10
<meta
  id="”MobileViewport”"
  name="”viewport”"
  content="”width"
  ="320,"
  initial-scale="1,"
  maximum-scale="1,"
  user-scalable="no”"
  servergenerated="”true”"
/>

规范标签内都所以元素都大小不超过320px即可，如果有特殊动画超过320px，将body的overflow属性设为hidden即可

下载个人博客传送门：largesoft.org(老博客地址已失效，请前往https://github.com/tkvern)

Welcome to my other publishing channels