H5自适应

• 一、设置html的font-size，使用rem作为单位

假设设计稿宽度750px，屏幕宽高750px，

1、1rem=屏幕宽度/设计稿宽度*100px，适合用px表示宽度

1rem=100px

rem=实际/100，300px=3rem

2、1rem=屏幕宽度/10，适合用百分比表示宽度

1rem=75px

rem=实际/设计稿宽度*10=百分比值/10，250px=30%=3rem

JS

 1 (function(doc, win) {
 2     var pageWidth = 750;
 3     var docEl = doc.documentElement,
 4         isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
 5         dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
 6         dpr = window.top === window.self ? dpr : 1, //被iframe引用时，禁止缩放
 7         dpr = 1,
 8         scale = 1 / dpr,
 9         resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
10     docEl.dataset.dpr = dpr;
11     var metaEl = doc.createElement('meta');
12     metaEl.name = 'viewport';
13     metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
14     docEl.firstElementChild.appendChild(metaEl);
15     var recalc = function() {
16         var width = docEl.clientWidth;
17         if (width / dpr > pageWidth) {
18             width = pageWidth * dpr;
19         }
20         // 乘以100，px : rem = 100 : 1
21         docEl.style.fontSize = 100 * (width / pageWidth) + 'px';
22     };
23     recalc()
24     if (!doc.addEventListener) return;
25     win.addEventListener(resizeEvt, recalc, false);
26 })(document, window);

• 二、设置viewport的scale，缩放视口

 1 var view_timer = null;
 2 function viewPort(userAgent, pageWidth) {
 3     var oView = document.getElementById('viewport');
 4     if (oView) {
 5         document.head.removeChild(oView);
 6     }
 7     if (!pageWidth) {
 8         pageWidth = 750;
 9     }
10     var screen_w = parseInt(window.screen.width),
11         scale = screen_w / pageWidth;
12
13     var creat_meta = document.createElement('meta');
14     creat_meta.name = 'viewport';
15     creat_meta.id = 'viewport';
16     if (/Android (\d+\.\d+)/.test(userAgent)) {
17         var version = parseFloat(RegExp.$1);
18         if (version > 2.3) {
19             creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ',user-scalable=1, minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', target-densitydpi=device-dpi';
20         } else {
21             creat_meta.content = '"width=' + pageWidth + ', target-densitydpi=device-dpi';
22         }
23     } else {
24         if(window.orientation=='-90' || window.orientation == '90'){
25             scale = window.screen.height / pageWidth;
26             creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi';
27         }
28         else{
29             creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi';
30         }
31     }
32     document.head.appendChild(creat_meta);
33 }
34 viewPort(navigator.userAgent);
35
36 window.onresize = function() {
37     clearTimeout(view_timer);
38     view_timer = setTimeout(function(){
39         viewPort(navigator.userAgent);
40     }, 500);
41 }