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(640);
}();

准备一个用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>