forked from hbxeagle/rem
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhd_adapter.html
138 lines (130 loc) · 5.64 KB
/
hd_adapter.html
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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<html style="">
<head>
<meta charset="UTF-8">
<meta content="telephone=no" name="format-detection"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<title>rem test end</title>
<script>
// 屏幕高清适配
(function(designWidth, rem2px) {
var win = window;
var doc = win.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var dpr = 0;
var scale = 0;
var tid;
if (!dpr && !scale) {
var devicePixelRatio = win.devicePixelRatio;
if (win.navigator.appVersion.match(/iphone/gi)) {
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
dpr = 1;
}
scale = 1 / dpr;
}
docEl.setAttribute('data-dpr', dpr);
if (!metaEl) {
metaEl = doc.createElement('meta');
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(metaEl);
} else {
var wrap = doc.createElement('div');
wrap.appendChild(metaEl);
doc.write(wrap.innerHTML);
}
} else {
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'width=device-width,initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
}
// 以上代码是对 dpr 和 viewport 的处理，代码来自 lib-flexible。
// 一下代码是处理 rem，来自上篇文章。不同的是获取屏幕宽度使用的是
// document.documentElement.getBoundingClientRect
// 也是来自 lib-flexible ，tb的技术还是很强啊。
function refreshRem(_designWidth, _rem2px){
// 修改viewpoint后，对网页宽度的影响，会立刻反应到
// document.documentElement.getBoundingClientRect().width
// 而这个改变反应到 window.innerWidth ，需要等较长的时间
// 相应的对高度的反应，
// document.documentElement.getBoundingClientRect().height
// 要稍微慢点，没有准确的数据，应该会受到机器的影响。
var width = docEl.getBoundingClientRect().width;
var d = window.document.createElement('div');
d.style.width = '1rem';
d.style.display = "none";
docEl.firstElementChild.appendChild(d);
var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
// d.remove();
var portrait = "@media screen and (width: "+ width +"px) {html{font-size:"+ ((width/(_designWidth/_rem2px)/defaultFontSize)*100) +"%;}}";
var dpStyleEl = doc.getElementById('dpAdapt');
if(!dpStyleEl) {
dpStyleEl = document.createElement('style');
dpStyleEl.id = 'dpAdapt';
dpStyleEl.innerHTML = portrait;
docEl.firstElementChild.appendChild(dpStyleEl);
} else {
dpStyleEl.innerHTML = portrait;
}
// 由于 height 的响应速度比较慢，所以在加个延时处理横屏的情况。
setTimeout(function(){
var height = docEl.getBoundingClientRect().height;
var landscape = "@media screen and (width: "+ height +"px) {html{font-size:"+ ((height/(_designWidth/_rem2px)/defaultFontSize)*100) +"%;}}"
var dlStyleEl = doc.getElementById('dlAdapt');
if(!dlStyleEl) {
dlStyleEl = document.createElement('style');
dlStyleEl.id = 'dlAdapt'
dlStyleEl.innerHTML = landscape;
docEl.firstElementChild.appendChild(dlStyleEl);
} else {
dlStyleEl.innerHTML = landscape;
}
},500);
}
// 延时，让浏览器处理完viewpoint造成的影响，然后再计算root font-size。
setTimeout(function(){
refreshRem(designWidth, rem2px);
}, 1);
})(640, 100);
</script>
<style>
*,html,body,div,p {
padding:0;
margin: 0;
color: #fff;
line-height:1.5;
}
</style>
</head>
<body>
<div id="bg" style="width:6.4rem;background:rgb(0,86,128);min-height:100%">
<p id="foo" style="width:1rem;height:1rem;font-size:.32rem;background:rgb(255,169,117)">1rem</p>
<div id="font" style="font-size:.32rem"></div>
</div>
<script>
var el = document.getElementById('foo');
var bg = document.getElementById('bg');
var pfontSize = window.getComputedStyle(el, null).getPropertyValue('width');
var bgwidth = window.getComputedStyle(bg, null).getPropertyValue('width');
document.getElementById('font').innerHTML = ''
+ "<br> 设置前html的 fontSize: " + beforeRootFontSize
+ "<br> 设置前1rem的宽度: " + defaultFontSize + "（浏览器默认字体大小精确值）"
+ "<br> html fontSize的设置值: " + h.style.fontSize
+ "<br> 设置后html的 fontSize: " + afterRootFontSize
+ "<br> 1rem 目标值: " + (window.innerWidth/640 * 100)
+ "<br> 1rem 实际值: " + pfontSize
+ "<br> 6.4rem 目标值: " + window.innerWidth + "（屏宽）"
+ "<br> 6.4rem 实际值: " + bgwidth
+ "<br> 6.4rem 计算值: " + (6.4 * (window.innerWidth/640 * 100)) + "（按公式计算）"
+ "<br> 6.4rem 计算值: " + (6.4 * parseFloat(afterRootFontSize)) + "（按设置后html的fontSize计算）"
+ "<br> 6.4rem 计算值: " + (6.4 * (parseFloat(h.style.fontSize)/100) * defaultFontSize) + "（按html fontSize设置值和浏览器默认字体大小精确值计算）"
</script>
</body>
</html>