MetaHandler.js:移动端适配各种屏幕
JS:
!function () { var opt = function() { var ua = navigator.userAgent, android = ua.match(/(Android);?[\s\/]+([\d.]+)?/), ipad = ua.match(/(iPad).*OS\s([\d_]+)/), ipod = ua.match(/(iPod)(.*OS\s([\d_]+))?/), iphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/), os = {}; if (android){ os.android = true, os.version = android[2];} if (iphone && !ipod) {os.ios = os.iphone = true, os.version = iphone[2].replace(/_/g, '.');} if (ipad) {os.ios = os.ipad = true, os.version = ipad[2].replace(/_/g, '.');} if (ipod) {os.ios = os.ipod = true, os.version = ipod[3] ? ipod[3].replace(/_/g, '.') : null;} var MetaHandler = function(){ //MONOSTATE if(MetaHandler.prototype.instance){ return MetaHandler.prototype.instance; } var me = this; var meta = {},_els; /** * _els * meta = {name:{content:String,seriation:Array,store:{property:String},...},...} * @method init */ function init(){ _els = document.getElementsByTagName('meta'); for(var i=0;i<_els.length;i++){ var name = _els[i].name; if(name){ meta[name] = {}; meta[name].el = _els[i]; meta[name].content = _els[i].content; meta[name].seriation = meta[name].content.split(','); meta[name].store = getContentStore(name); } } return me; } function getContentStore(name){ var content = meta[name].seriation,store = {}; for(var i=0;i<content.length;i++){ if(content[i].length<1){ content[i] = null; delete content[i]; content.length--; }else{ var ct = content[i].split('='), pp = ct[0]; if(pp){ store[pp] = ct[1]; } } } return store; } this.hasMeta = function(name){ return meta[name]?1:0; } this.createMeta = function(name){ if(!this.hasMeta(name)){ var el = document.createElement('meta'); el.name = name; document.head.appendChild(el); meta[name] = {}; meta[name].el = el; meta[name].content = ''; meta[name].seriation = []; meta[name].store = {}; } return me; } this.setContent = function(name,value){ meta[name].content = value; meta[name].el.content = value; return me; } this.getContent = function(name){ return meta[name] && meta[name].content; } function updateContent(name){ meta[name].content = meta[name].seriation.join(','); me.setContent(name,meta[name].content); return me; } this.removeContentProperty = function(name,property){ var _property = property; if(meta[name]){ if(meta[name].store[_property]!=null){ for(var i = 0;i<meta[name].seriation.length;i++){ if(meta[name].seriation[i].indexOf(property+'=')!=-1){ meta[name].seriation[i] = null; delete meta[name].seriation[i]; break; } } } updateContent(name); } return me; } this.getContentProperty = function(name,property){ return meta[name] && meta[name].store[property]; } this.setContentProperty = function(name,property,value){ var _property = property, pv = property+'='+value; if(meta[name]){ if(meta[name].store[_property]!=null){ meta[name].store[_property] = value; for(var i = 0;i<meta[name].seriation.length;i++){ if(meta[name].seriation[i].indexOf(property+'=')!=-1){ meta[name].seriation[i] = pv; break; } } }else{ meta[name].store[_property] = value; meta[name].seriation.push(pv); } updateContent(name); } return me; } this.fixViewportWidth = function(width,fixBody){ width = width || me.getContentProperty('viewport','width'); if(width != 'device-width'){ var iw = window.innerWidth || width, ow = window.outerWidth || iw, sw = window.screen.width || iw, saw = window.screen.availWidth || iw, ih = window.innerHeight || width, oh = window.outerHeight || ih, sh = window.screen.height || ih, sah = window.screen.availHeight || ih, w = Math.min(iw,ow,sw,saw,ih,oh,sh,sah), ratio = w/width, dpr = window.devicePixelRatio; ratio = Math.min(ratio,dpr); //fixBody may trigger a reflow,you should not use it if you could do it in your css if(fixBody){ document.body.style.width = width+'px'; } if(os.android){ me.removeContentProperty('viewport','user-scalable') .setContentProperty('viewport','target-densitydpi','device-dpi') .setContentProperty('viewport','initial-scale',ratio) .setContentProperty('viewport','maximum-scale',ratio); }else if(os.ios && !os.android){ me.setContentProperty('viewport','user-scalable','no'); if(os.ios && parseInt(os.version)<7){ me.setContentProperty('viewport','initial-scale',ratio); } } } } init(); //MONOSTATE MetaHandler.prototype.instance = this; }; return new MetaHandler; }(); // // 调用自适应屏幕的功能函数 opt.fixViewportWidth(750); }();
准备一个用px实现的移动页面(宽度固定死的页面),引入metahandler.js框架
1、视口设置
width=640,是根据psd图来设置,有多宽设置多宽(设计图是640的设置64)
<meta content="target-densitydpi=device-dpi,width=640" name="viewport">
2、body设置宽度,是根据psd图来设置,有多宽设置多宽
3. metahandler.js里面参数的设置
调用自适应屏幕的功能函数,640是根据psd图来设置,有多宽设置多宽
opt.fixViewportWidth(640);
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>MetaHandler.js示例 - jingPlus</title> <meta content="target-densitydpi=device-dpi,width=640" name="viewport"> <link rel="stylesheet" href="normalize.css"> <style> body { /*设置跟psd一样的宽度*/ width: 640px; margin: 0 auto; background-color: #f0eff4; } .wrap header { position: relative; height: 78px; line-height: 78px; background-color: #f9f9f9; font-size: 32px; text-align: center; } .con { padding: 24px 17px 0; } .con nav a { float: left; width: 146px; height: 146px; margin-bottom: 10px; line-height: 146px; font-size: 22px; text-align: center; } .con nav a:nth-child(1) { width: 299px; background-color: #e66444; } .con nav a:nth-child(2) { margin: 0 7px; background-color: #f09056; } .con nav a:nth-child(3) { background-color: #a2c159; } .con nav a:nth-child(4) { background-color: #9178af; } .con nav a:nth-child(5) { margin: 0 7px; background-color: #49a7da; } .con nav a:nth-child(6) { margin-right: 7px; background-color: #56bc8a; } .con nav a:nth-child(7) { background-color: #d179ad; } </style> </head> <body> <div class="wrap"> <header>示例标题</header> <section class="con"> <nav class="clearfix"> <a href="" title="">团上团下</a> <a href="" title="">在线订餐</a> <a href="" title="">报修申请</a> <a href="" title="">地铁线路</a> <a href="" title="">公交站点</a> <a href="" title="">社区超市</a> <a href="" title="">今日优惠</a> </nav> </section> </div> <!-- 引入MetaHandler --> <script type="text/javascript" src="MetaHandler.js"></script> </body> </html>
全部教程http://each.sinaapp.com/angular/index.html