大屏适配方案

 1 class DevicePixelRatio {
 2       constructor() { }
 3       getSystem() {
 4         var agent = navigator.userAgent.toLowerCase();
 5         var ismac = /macintosh|mac os x/i.test(navigator.userAgent);
 6         if (ismac) {
 7           return false;
 8         }
 9         if (agent.indexOf('windows') >= 0) {
10           return true;
11         }
12       }
13       correct() {
14         var ratio = 0,
15           screen = window.screen,
16           ua = navigator.userAgent.toLowerCase();
17 
18         if (window.devicePixelRatio !== undefined) {
19           ratio = window.devicePixelRatio;
20         }
21         else if (~ua.indexOf('msie')) {
22           if (screen.deviceXDPI && screen.logicalXDPI) {
23             ratio = screen.deviceXDPI / screen.logicalXDPI;
24           }
25         }
26         else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
27           ratio = window.outerWidth / window.innerWidth;
28         }
29 
30         document.getElementsByTagName('body')[0].style.zoom = 1 / ratio;
31       }
32       // 监听页面缩放
33       watch() {
34         window.addEventListener('resize', this.correct);
35       }
36       unWatch() {
37         window.removeEventListener('resize', this.correct);
38       }
39       // 初始化页面比例 
40       init() {
41         if (this.getSystem()) {
42           this.correct();
43           this.watch();
44         }
45       }
46     }