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 }
