Skip to content

Commit c9dfd33

Browse files
author
zhuxun.jb
committed
支持手动设置meta标签
1 parent a659457 commit c9dfd33

File tree

7 files changed

+84
-44
lines changed

7 files changed

+84
-44
lines changed

‎README.md

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
## 最新版本
66

7-
**0.1.4**
7+
**0.1.5**
88

99
## 安装依赖
1010

@@ -97,6 +97,13 @@
9797

9898
## 常见疑问
9999

100+
### 如何手动设置meta标签
101+
102+
只需要在引入`tbm.js`之前，输出meta标签即可，例如：
103+
104+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
105+
<script src="http://g.tbcdn.cn/mtb/lib-tbm/{{version}}/tbm.js"></script>
106+
100107
### 单位a的可能实现方式，为什么选择用rem实现？
101108
[相关讨论](http://gitlab.alibaba-inc.com/mtb/lib-tbm/wikis/unit-a)
102109

‎build/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "lib.tbm",
33
"description": "手淘高清方案，栅格方案",
4-
"version": "0.1.4",
4+
"version": "0.1.5",
55
"homepage": "http://gitlab.alibaba-inc.com/mtb/lib-tbm",
66
"author": [{
77
"name": "寒泉",

‎build/tbm.debug.js

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,37 @@
11
;(function(win) {
2-
var h;
3-
var dpr = win.navigator.appVersion.match(/iphone/gi)?win.devicePixelRatio:1;
4-
var scale = 1 / dpr;
52
var docEl = document.documentElement;
6-
var metaEl = document.createElement('meta');
3+
var metaEl = document.querySelector('meta[name="viewport"]');
4+
var dpr;
5+
var scale;
6+
var tid;
7+
8+
if (metaEl) {
9+
console.warn('将根据已有的meta标签来设置缩放比例');
10+
var match = metaEl.getAttribute('content').match(/initial\-scale=(["']?)([\d\.]+)\1?/);
11+
if (match) {
12+
scale = parseFloat(match[2]);
13+
dpr = 1 / scale;
14+
}
15+
}
16+
17+
if (!dpr && !scale) {
18+
dpr = win.navigator.appVersion.match(/iphone/gi)?win.devicePixelRatio:1;
19+
scale = 1 / dpr;
20+
}
21+
22+
docEl.setAttribute('data-dpr', dpr);
23+
if (!metaEl) {
24+
metaEl = document.createElement('meta');
25+
metaEl.setAttribute('name', 'viewport');
26+
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
27+
if (docEl.firstElementChild) {
28+
docEl.firstElementChild.appendChild(metaEl);
29+
} else {
30+
var wrap = document.createElement('div');
31+
wrap.appendChild(metaEl);
32+
document.write(wrap.innerHTML);
33+
}
34+
}
735

836
function setUnitA(){
937
win.rem = docEl.getBoundingClientRect().width / 16;
@@ -12,26 +40,15 @@
1240

1341
win.dpr = dpr;
1442
win.addEventListener('resize', function() {
15-
clearTimeout(h);
16-
h = setTimeout(setUnitA, 300);
43+
clearTimeout(tid);
44+
tid = setTimeout(setUnitA, 300);
1745
}, false);
1846
win.addEventListener('pageshow', function(e) {
1947
if (e.persisted) {
20-
clearTimeout(h);
21-
h = setTimeout(setUnitA, 300);
48+
clearTimeout(tid);
49+
tid = setTimeout(setUnitA, 300);
2250
}
2351
}, false);
24-
25-
docEl.setAttribute('data-dpr', dpr);
26-
metaEl.setAttribute('name', 'viewport');
27-
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
28-
if (docEl.firstElementChild) {
29-
docEl.firstElementChild.appendChild(metaEl);
30-
} else {
31-
var wrap = document.createElement('div');
32-
wrap.appendChild(metaEl);
33-
document.write(wrap.innerHTML);
34-
}
3552

3653
setUnitA();
3754
})(window);

‎build/tbm.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
<meta content="yes" name="apple-mobile-web-app-capable" />
66
<meta content="yes" name="apple-touch-fullscreen" />
77
<meta content="telephone=no,email=no" name="format-detection" />
8-
<link rel="apple-touch-icon" href="favicon.png" />
9-
<link rel="Shortcut Icon" href="favicon.png" type="image/x-icon" />
8+
<!-- <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" /> -->
109
<link href="build/tbm.debug.css" rel="styleSheet" type="text/css"/>
1110
<script src="build/tbm.debug.js"></script>
1211
<title>手机淘宝栅格系统</title>

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "lib.tbm",
33
"description": "手淘高清方案，栅格方案",
4-
"version": "0.1.4",
4+
"version": "0.1.5",
55
"homepage": "http://gitlab.alibaba-inc.com/mtb/lib-tbm",
66
"author": [{
77
"name": "寒泉",

‎src/tbm.js

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,37 @@
11
;(function(win) {
2-
var h;
3-
var dpr = win.navigator.appVersion.match(/iphone/gi)?win.devicePixelRatio:1;
4-
var scale = 1 / dpr;
52
var docEl = document.documentElement;
6-
var metaEl = document.createElement('meta');
3+
var metaEl = document.querySelector('meta[name="viewport"]');
4+
var dpr;
5+
var scale;
6+
var tid;
7+
8+
if (metaEl) {
9+
console.warn('将根据已有的meta标签来设置缩放比例');
10+
var match = metaEl.getAttribute('content').match(/initial\-scale=(["']?)([\d\.]+)\1?/);
11+
if (match) {
12+
scale = parseFloat(match[2]);
13+
dpr = 1 / scale;
14+
}
15+
}
16+
17+
if (!dpr && !scale) {
18+
dpr = win.navigator.appVersion.match(/iphone/gi)?win.devicePixelRatio:1;
19+
scale = 1 / dpr;
20+
}
21+
22+
docEl.setAttribute('data-dpr', dpr);
23+
if (!metaEl) {
24+
metaEl = document.createElement('meta');
25+
metaEl.setAttribute('name', 'viewport');
26+
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
27+
if (docEl.firstElementChild) {
28+
docEl.firstElementChild.appendChild(metaEl);
29+
} else {
30+
var wrap = document.createElement('div');
31+
wrap.appendChild(metaEl);
32+
document.write(wrap.innerHTML);
33+
}
34+
}
735

836
function setUnitA(){
937
win.rem = docEl.getBoundingClientRect().width / 16;
@@ -12,26 +40,15 @@
1240

1341
win.dpr = dpr;
1442
win.addEventListener('resize', function() {
15-
clearTimeout(h);
16-
h = setTimeout(setUnitA, 300);
43+
clearTimeout(tid);
44+
tid = setTimeout(setUnitA, 300);
1745
}, false);
1846
win.addEventListener('pageshow', function(e) {
1947
if (e.persisted) {
20-
clearTimeout(h);
21-
h = setTimeout(setUnitA, 300);
48+
clearTimeout(tid);
49+
tid = setTimeout(setUnitA, 300);
2250
}
2351
}, false);
24-
25-
docEl.setAttribute('data-dpr', dpr);
26-
metaEl.setAttribute('name', 'viewport');
27-
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
28-
if (docEl.firstElementChild) {
29-
docEl.firstElementChild.appendChild(metaEl);
30-
} else {
31-
var wrap = document.createElement('div');
32-
wrap.appendChild(metaEl);
33-
document.write(wrap.innerHTML);
34-
}
3552

3653
setUnitA();
3754
})(window);

0 commit comments

Comments
 (0)