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

　　

 

准备一个用px实现的移动页面（宽度固定死的页面），引入metahandler.js框架

 

 

1、视口设置
width=640，是根据psd图来设置，有多宽设置多宽（设计图是640的设置64）

2、body设置宽度，是根据psd图来设置，有多宽设置多宽
3. metahandler.js里面参数的设置
调用自适应屏幕的功能函数，640是根据psd图来设置，有多宽设置多宽
opt.fixViewportWidth(640);

 

 

	

		
示例标题
		

			

				团上团下
				在线订餐
				报修申请
				地铁线路
				公交站点
				社区超市
				今日优惠
			
		
	
	
	 

 

　　

转载于:https://www.cnblogs.com/xfdmb/p/9973877.html