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

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

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

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

使用的基本框架

主要使用的基本框架是:MetaHandler.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;
   }();

   // 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学堂(h5course-com)

原文发表时间:2016-01-06

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

Hybris UI的Route(路由)实现

登录Hybris前台,在product catalog里选择Digital camera:

3363
来自专栏c#开发者

数据驱动开发For Silverlight WCF RIA1.0 三步曲

数据驱动开发For Silverlight WCF RIA1.0 三步曲 WCF RIA 1.0的正式发布,让Silverlight开发业务应用系统变得更加简...

2504
来自专栏大数据文摘

维基百科中的数据科学:手把手教你用Python读懂全球最大百科全书

几年前谁能想到,匿名贡献者们的义务工作竟创造出前所未有的巨大在线知识库?维基百科不仅是你写大学论文时最好的信息渠道,也是一个极其丰富的数据源。

813
来自专栏简书专栏

Python数据持久化-csv、excel篇

2018年7月4日笔记 学习目标: 1.会使用Python第三方模块操作CSV文件 2.会使用Python第三方模块操作EXCEL文件

642
来自专栏喵了个咪的博客空间

1.开发规范-- 常用的版本控制

#常用的版本控制# ##前言## 这里版本控制是经过笔者在项目中实践总结得出的,有比较广的适用范围, 当然也要根据不同的业务有取舍应为笔者水平有限,其中有不足的...

36210
来自专栏安恒网络空间安全讲武堂

Writeup丨国赛线上初赛解题第二波~

1154
来自专栏jojo的技术小屋

原 荐 svga 动画

作者:汪娇娇 时间:2017年12月26日 对于一些小的简单的动画,借助css、js差不多就能实现,而且还不能保证还原度百分百(还能接受); 对于那些复杂的动画...

4124
来自专栏互联网杂技

HTML head 头标签 总结

HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多...

2757
来自专栏ml

CEF使用的几个注意点

    CEF为chrome浏览器的切入其他浏览器中的轻量级框架。 开发的客户端的时候,这是作为界面显示的首先,可以增强客户的易变性,可塑性。 在开发的过程中(...

51910
来自专栏FreeBuf

见招拆招:绕过WAF继续SQL注入常用方法

Web Hacker总是生存在与WAF的不断抗争之中的,厂商不断过滤,Hacker不断绕过。WAF bypass是一个永恒的话题,不少基友也总结了很多奇技怪招。...

1885

扫码关注云+社区