移動端--用PX爲單位+JS框架實現頁面佈局

時間 2019-11-09

標籤移動單位框架實現頁面佈局欄目無線简体版

原文原文鏈接

一：你們先下載metahandler.jsjavascript

二：準備一個用px實現的移動頁面（寬度固定死的頁面），引入metahandler.js框架css

一、視口設置

width=640，是根據psd圖來設置，有多寬設置多寬（設計圖是640的設置640）

<meta content="target-densitydpi=device-dpi,width=640" name="viewport">

2. 引入MetaHandler.jshtml

<script type="text/javascript" src="js/MetaHandler.js"></script>

三、body設置寬度java

body{ width:640px; }

三：修改MetaHandler.js文件的最後配置代碼。在執行fixViewportWidth函數時，傳入相應的像素值做爲參數便可。

opt.fixViewportWidth(640);   // 調用自適應屏幕的功能函數，640是根據psd圖來設置，有多寬設置多寬

四. 而後按照電腦端的製做就能夠了全程用PX就能夠的

五：橫屏存在的兼容問題（測試地址http://c.3g.163.com/CreditMarket/default.html）

在使用谷歌瀏覽器進行瀏覽時，若是橫屏後點擊刷新，則頁面會再縮小，成爲居中顯示狀態，此時再豎屏以後，左右也會留白（此時再刷新是能從新恢復正常）。具體效果以下。android

橫屏後再刷新的效果：ios

從橫屏恢復到縱屏的狀態：瀏覽器

咱們的見解：不多有人在旋轉到橫屏以後再刷新頁面。並且目前移動端使用谷歌瀏覽器的人也不多，因此我的感受這個bug是能夠忽略的。另外，對於橫屏轉回到縱屏的時候，實際上咱們是能夠進行設備方向檢測，而後再觸發一次頁面刷新，就不會出現縱屏上的問題了~app

最後的話：咱們使用了這個框架進行頁面的開發，可是最近在使用時，感受到在一些瀏覽器當中有些卡頓，用一樣的設備和瀏覽器去測試了網易的手機頁面，卻是沒有什麼卡頓現象，關於卡頓的問題，目前還在思考當中~~~框架

六：metahandler.js應用成功案例

一、http://c.3g.163.com/CreditMarket/default.html

二、http://m.deja.me/topics/#/special/9

三、http://impicture.lofter.com/

最終： JS代碼iphone

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


   // HTML5友情提示 —— 調用自適應屏幕的功能函數
   opt.fixViewportWidth(1080);
}();