MetaHandler.js：移动端适配各种屏幕

Posted 2021-01-20 幸福的目标

JS:

 

!function () {
  var opt = function() {
    var ua = navigator.userAgent,
      android = ua.match(/(Android);?[s/]+([d.]+)?/),
      ipad = ua.match(/(iPad).*OSs([d_]+)/),
      ipod = ua.match(/(iPod)(.*OSs([d_]+))?/),
      iphone = !ipad && ua.match(/(iPhonesOS)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>