html5-Response-rules-and-schemes

  • Do you know how to build a mobile terminal page?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<style type="text/css">
a { -webkit-tap-highlight-color: rgba(0,0,0,0); }
.btn-blue { display: block; height: 42px; line-height: 42px; text-align: center; border-radius: 4px; font-size: 18px; color: #FFFFFF; background-color: #4185F3; }
.btn-blue:active { background-color: #357AE8; }
</style>
</head>
<body>
<div class="app"></div>
</body>
</html>
  • How do I get this code adaptation?
1
2
3
4
5
6
7
8
9
10
11
12
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
  • This is Taobao’s plan
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
! function() {
var e = "@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",
d = document.createElement("style");
if (document.getElementsByTagName("head")[0].appendChild(d), d.styleSheet) {
d.styleSheet.disabled || (d.styleSheet.cssText = e)
} else {
try {
d.innerHTML = e
} catch (f) {
d.innerText = e
}
}
}();
! function(N, M) {
function L() {
var a = I.getBoundingClientRect().width;
a / F > 540 && (a = 540 * F);
var d = a / 10;
I.style.fontSize = d + "px", D.rem = N.rem = d
}
var K, J = N.document,
I = J.documentElement,
H = J.querySelector('meta[name="viewport"]'),
G = J.querySelector('meta[name="flexible"]'),
F = 0,
E = 0,
D = M.flexible || (M.flexible = {});
if (H) {
console.warn("将根据已有的meta标签来设置缩放比例");
var C = H.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
C && (E = parseFloat(C[1]), F = parseInt(1 / E))
} else {
if (G) {
var B = G.getAttribute("content");
if (B) {
var A = B.match(/initial\-dpr=([\d\.]+)/),
z = B.match(/maximum\-dpr=([\d\.]+)/);
A && (F = parseFloat(A[1]), E = parseFloat((1 / F).toFixed(2))), z && (F = parseFloat(z[1]), E = parseFloat((1 / F).toFixed(2)))
}
}
}
if (!F && !E) {
var y = N.navigator.userAgent,
x = (!!y.match(/android/gi), !!y.match(/iphone/gi)),
w = x && !!y.match(/OS 9_3/),
v = N.devicePixelRatio;
F = x && !w ? v >= 3 && (!F || F >= 3) ? 3 : v >= 2 && (!F || F >= 2) ? 2 : 1 : 1, E = 1 / F
}
if (I.setAttribute("data-dpr", F), !H) {
if (H = J.createElement("meta"), H.setAttribute("name", "viewport"), H.setAttribute("content", "initial-scale=" + E + ", maximum-scale=" + E + ", minimum-scale=" + E + ", user-scalable=no"), I.firstElementChild) {
I.firstElementChild.appendChild(H)
} else {
var u = J.createElement("div");
u.appendChild(H), J.write(u.innerHTML)
}
}
N.addEventListener("resize", function() {
clearTimeout(K), K = setTimeout(L, 300)
}, !1), N.addEventListener("pageshow", function(b) {
b.persisted && (clearTimeout(K), K = setTimeout(L, 300))
}, !1), "complete" === J.readyState ? J.body.style.fontSize = 12 * F + "px" : J.addEventListener("DOMContentLoaded", function() {
J.body.style.fontSize = 12 * F + "px"
}, !1), L(), D.dpr = N.dpr = F, D.refreshRem = L, D.rem2px = function(d) {
var c = parseFloat(d) * this.rem;
return "string" == typeof d && d.match(/rem$/) && (c += "px"), c
}, D.px2rem = function(d) {
var c = parseFloat(d) / this.rem;
return "string" == typeof d && d.match(/px$/) && (c += "rem"), c
}
}(window, window.lib || (window.lib = {}));