https://student.hk/js/flexible.js

1;(function flexible(window, document) {
2	var docEl = document.documentElement
3	var dpr = window.devicePixelRatio || 1
4
5	// adjust body font size
6	function setBodyFontSize() {
7		if (document.body) {
8			document.body.style.fontSize = 12 * dpr + 'px'
9		} else {
10			document.addEventListener('DOMContentLoaded', setBodyFontSize)
11		}
12	}
13	setBodyFontSize()
14
15	// set 1rem = viewWidth / 10
16	var browser = {
17		versions: (function() {
18			var u = navigator.userAgent,
19				app = navigator.appVersion
20			return {
21				webkit: u.indexOf('AppleWebKit') > -1,
22				mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动端
23				ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
24				android: u.indexOf('Android') > -1,
25				iPhone: u.indexOf('iPhone') > -1,
26				iPad: u.indexOf('iPad') > -1
27			}
28		})(),
29		language: (navigator.browserLanguage || navigator.language).toLowerCase()
30	}
31	function setRemUnit() {
32		var width = docEl.getBoundingClientRect().width
33		// console.log(browser.versions, width, '判断设备')
34
35		if (!browser.versions.mobile) {
36			width = width > 1200 ? width : 1200
37		}
38		var rem
39		// if (width / dpr > 540) {
40		// 	width = width * dpr
41		// }
42		if (browser.versions.mobile) {
43			if (browser.versions.iPad) {
44				if (width >= 1024) {
45					rem = width / 1024 * 100 - 30
46				} else {
47					// console.log(width, 'width')
48					rem = width / width * 100
49				}
50			} else {
51				rem = width / 7.5
52			}
53		} else {
54			rem = width / 19.2
55		}
56		// var rem = docEl.clientWidth / 10
57		docEl.style.fontSize = rem + 'px'
58
59		flexible.rem = window.rem = rem
60	}
61
62	setRemUnit()
63
64	// reset rem unit on page resize
65	window.addEventListener('resize', setRemUnit)
66	window.addEventListener('pageshow', function(e) {
67		if (e.persisted) {
68			setRemUnit()
69		}
70	})
71
72	// detect 0.5px supports
73	if (dpr >= 2) {
74		var fakeBody = document.createElement('body')
75		var testElement = document.createElement('div')
76		testElement.style.border = '.5px solid transparent'
77		fakeBody.appendChild(testElement)
78		docEl.appendChild(fakeBody)
79		if (testElement.offsetHeight === 1) {
80			docEl.classList.add('hairlines')
81		}
82		docEl.removeChild(fakeBody)
83	}
84})(window, document)