metahandler.js——移动端适配各种屏幕无痛工具脚本

移动端H5知识[系列] - 固定像素的实现方法

HTML5学堂:随着对移动端的探索,而今我们逐渐形成了“横向百分比,纵向rem”。日前看网易对移动端的操作,发现网易的lofter采用了固定像素进行制作。今天我们就来剖析一下这种方法。

2015.08.19 测试手记:在魅族4当中的内置浏览器进行测试时,无论是我们书写的页面还是网易的lofter页面,都出现了bug问题,主要bug现象如下:当手指滑过部分文字的时候,文字的大小会出问题。经过排查之后,发现,在网页中的a标签会出现这个问题。当鼠标移动到a标签上的时候(即便不点击),标签的字体和行高会失效。具体原因以及解决办法尚不明确。

关于这种方法,其实在六月初的时候我和我们的能堡讲师在使用lofter的时候,就已经看到了这种用法,但是一直没有放到实际的课程当中,其主要原因是没有进行实际操作。这次HTML5学堂的移动端官网,我们也采用了这种方法。

使用的基本框架

主要使用的基本框架是:MetaHandler.js。大家可以点击此处下载——“下载MetaHandler.js”,提取密码为:9074,也可以直接复制下面的代码。

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

基本原理

主要利用了视口中的缩放值,在视口设置当中,可以通过调整缩放值,控制网页的整体缩放。从而达到每个页面效果相同。应该说是一个不错的方法吧。

具体使用步骤

想实现这个功能,其实并不难,几个简单的步骤就能够搞定。我们一起来看一下:

1、按照PSD图的实际宽度,使用像素单位进行页面的基本书写(和写PC端页面一样啦)。在页面顶部添加meta,设置视口信息,将width设置为PSD图的实际宽度(即制作页面时的实际宽度)。但是不需要设置缩放值。demo如下:

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

2、修改MetaHandler.js文件的最后配置代码。在执行fixViewportWidth函数时,传入相应的像素值作为参数即可。

// HTML5友情提示 —— 调用自适应屏幕的功能函数
opt.fixViewportWidth(1080);

3、第三步?没有第三步了~!!!是不是很简单?

可能的问题

在使用谷歌浏览器进行浏览时,如果横屏后点击刷新,则页面会再缩小,成为居中显示状态,此时再竖屏之后,左右也会留白(此时再刷新是能重新恢复正常)。具体效果如下。

横屏后再刷新的效果:

从横屏恢复到纵屏的状态:

我们的看法:很少有人在旋转到横屏之后再刷新页面。而且目前移动端使用谷歌浏览器的人也很少,所以个人感觉这个bug是可以忽略的。另外,对于横屏转回到纵屏的时候,实际上我们是可以进行设备方向检测,然后再触发一次页面刷新,就不会出现纵屏上的问题了~

最后的话:我们使用了这个框架进行页面的开发,但是最近在使用时,感觉到在一些浏览器当中有些卡顿,用同样的设备和浏览器去测试了网易的手机页面,倒是没有什么卡顿现象,关于卡顿的问题,目前还在思考当中~~~

欢迎沟通交流~HTML5学堂

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-08-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落花落雨不落叶

Chrome的First Paint触发的时机探究

1063
来自专栏Android群英传

一触即发——App启动优化最佳实践

803
来自专栏腾讯NEXT学位

使用 CSS 追踪用户

3439
来自专栏小樱的经验随笔

【全网最全的博客美化系列教程】01.添加Github项目链接

你们肯定对左上角的Fork me on Github比较好奇吧,这个是怎么弄的呢,其实你们通过F12控制台去找到这个控件,你们也能实现这个效果,如下图,很明显,...

773
来自专栏增长技术

Android 下拉刷新相关库

本类库是单纯的下拉刷新。如果你需要用到加载更多,看这个项目: https://github.com/liaohuqiu/android-cube-app

852
来自专栏蘑菇先生的技术笔记

Windows10自适应和交互式toast通知[1]

创建灵活的toast通知,包括内嵌图片及更多的内容,不在局限于之前Windows 8.1和Windows Phone 8.1提供的toast模板。

1006
来自专栏全沾开发(huā)

React-native踩坑小记

React-native踩坑小记 最近开始研究ReactNative咯,大概一两周了吧已经,略略说一下遇到的一些坑爹问题 问题一般都...

4438
来自专栏HTML5学堂

Form 表单 问题多多(上)

HTML5学堂 - 刘国利:2013年8月时,曾在给学生讲解WEB前端开发的HTML和CSS基本知识,学生要面对“表单”的制作。我喜欢把“表单”称之为初入前端的...

34110
来自专栏用户2442861的专栏

Chrome开发者工具不完全指南(二、进阶篇)

上篇向大家介绍完了基础功能篇,这次分享的是Chrome开发工具中最有用的面板Sources。  Sources面板几乎是我最常用到的Chrome功能面板,也是...

531
来自专栏calmound

基于iframe的移动端嵌套

需求描述 上上周接到了新的项目,移动端需要做一个底部有五个导航,点击不同的导航页面主体显示不同的页面,其中两个页面是自己做,而另外三个页面是引用另外三个网址,其...

3446

扫码关注云+社区