关于remetajs

发表于   |   分类于   |     |  

构成

remeta.js主要由两部分构成，hitdpr()和remeta()。

1.hitdpr

给根节点打上dpr标记，区分高倍屏，方便图片资源替换。

2.remeta

通关设置目标参数集中适配同一版css，可直接使用px，而无需计算em或是rem。

场景

适用所有情况下的关于屏幕适配的问题，跨屏自适应，兼容ie8+，减轻媒体查询工作。

代码

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
/*
 * @Author: feahter
 * @Date:   2017-08-02 15:38:47
 * @Last Modified by:   feahter
 * @Last Modified time: 2017-08-03 11:57:31
 */
'use strict';
! function(w, d) {
    var _width = w.screen.availWidth;
    var dpr = 0;
    function hitdpr() {
        var isAndroid = w.navigator.appVersion.match(/android/gi);
        var isIPhone = w.navigator.appVersion.match(/iphone/gi);
        var devicePixelRatio = w.devicePixelRatio;
        if (isIPhone) {
            // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
            if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
                dpr = 3;
            } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
                dpr = 2;
            } else {
                dpr = 1;
            }
        } else {
            devicePixelRatio ? dpr = devicePixelRatio : dpr = 1;
        }
        d.documentElement.setAttribute('data-dpr', dpr);
    }
    function remeta(target) {
        var _meta = d.querySelector('meta[name="viewport"]');
        var scale = _width / target;
        if (scale > 1) { scale = 1; }
        var oString = "width=device-width, initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no";
        if (!_meta) {
            _meta = d.createElement('meta');
            _meta.setAttribute('name', 'viewport');
            _meta.setAttribute('content', oString);
            if (_meta.firstElementChild) {
                _meta.firstElementChild.appendChild(_meta);
            } else {
                var wrap = d.createElement('div');
                wrap.appendChild(_meta);
                document.write(wrap.innerHTML);
            }
        } else {
            _meta.setAttribute('content', oString);
        }
    };
    // 页面加载调用
    (function() {
        if (_width <= 414) {
            remeta(414);
        } else if (_width > 414 && _width <= 768) {
            remeta(768);
        } else if (_width > 768 && _width <= 1200) {
            remeta(1280);
        }
        hitdpr();
    })();
    //用户变化屏幕方向时调用
    w.addEventListener('orientationchange', function(e) {
        if (_width >= 768 && _width <= 1200) {
            location.reload();
        }
    });
}(window, document);

1.hitdpr()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function hitdpr() {
       var isAndroid = w.navigator.appVersion.match(/android/gi);
       var isIPhone = w.navigator.appVersion.match(/iphone/gi);
       var devicePixelRatio = w.devicePixelRatio;
       if (isIPhone) {
           // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
           if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
               dpr = 3;
           } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
               dpr = 2;
           } else {
               dpr = 1;
           }
       } else {
           devicePixelRatio ? dpr = devicePixelRatio : dpr = 1;
       }
       d.documentElement.setAttribute('data-dpr', dpr);
   }

通过window对象的devicePixelRatio属性获取dpr，正则匹配判断区分设备系统类型，给根节点打上标记。

2.remta()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function remeta(target) {
        var _meta = d.querySelector('meta[name="viewport"]');
        var scale = _width / target;
        if (scale > 1) { scale = 1; }
        var oString = "width=device-width, initial-scale=" + scale + ", maximum-scale=" + scale + ", user-scalable=no";
        if (!_meta) {
            _meta = d.createElement('meta');
            _meta.setAttribute('name', 'viewport');
            _meta.setAttribute('content', oString);
            if (_meta.firstElementChild) {
                _meta.firstElementChild.appendChild(_meta);
            } else {
                var wrap = d.createElement('div');
                wrap.appendChild(_meta);
                document.write(wrap.innerHTML);
            }
        } else {
            _meta.setAttribute('content', oString);
        }
    };

获取当前设备的真实宽度，设置目标target参数，通过创建或改写name为viewport的meta标签参数达到缩放目的。

3.调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 页面加载调用
  (function() {
      if (_width <= 414) {
          remeta(414);
      } else if (_width > 414 && _width <= 768) {
          remeta(768);
      } else if (_width > 768 && _width <= 1200) {
          remeta(1280);
      }
      hitdpr();
  })();
  //用户变化屏幕方向时调用
  w.addEventListener('orientationchange', function(e) {
      if (_width >= 768 && _width <= 1200) {
          location.reload();
      }
  });

通过判断参数调用remeta(target)实现集中兼容，小于逻辑宽度为414的均集中缩放至414的显示效果，通过监听orientationchange事件刷新横竖屏变化事件。

打赏鼓励一下。