移动端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 条评论
登录 后参与评论

相关文章

来自专栏前端新视界

如何在已有的 Web 应用中使用 ReactJS

当我们学习一项新技术,可能是一个 JavaScript 框架,也可能是一个 CSS 方法,我们将面对这样的挑战 如何在旧网站上运用这项新技术?。很多教程讲述了如...

530
来自专栏Material Design组件

Human Interface Guidelines —— Action Sheets

2616
来自专栏软件开发

CSS3与页面布局学习总结(四)——页面布局大全

一、负边距与浮动布局 1.1、负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%。当一个元素与另一个元素m...

2256
来自专栏Python爬虫与数据挖掘

如何利用CSS选择器抓取京东网商品信息

前几天小编分别利用Python正则表达式、BeautifulSoup选择器、Xpath选择器分别爬取了京东网商品信息,今天小编利用CSS选择器来为大家展示一下如...

854
来自专栏向治洪

React 动画框架简介

由于 React 加持了虚拟 DOM 等诸多特性,所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑,只会简...

2217
来自专栏王二麻子IT技术交流园地

HTML出现错位的问题

引起网页HTML显示错位的几个常见问题:          1、在HTML代码中缺失元素的开始或结束标签          2、CSS设置中对边界、填充或边框的...

1685
来自专栏极客编程

用Vue.js开发一个电影App的前端界面

我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目。这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WE...

491
来自专栏HTML5学堂

iScroll5 表单元素无法失焦 解决方法

iScroll5 表单元素无法失焦 解决方法 HTML5学堂:iScroll框架从4版本升级到5版本之后,很好的解决了滚动区域中表单元素不能聚焦的问题,但是,2...

3439
来自专栏向治洪

React 动画框架简介

由于 React 加持了虚拟 DOM 等诸多特性,所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑,只会简...

2247
来自专栏IMWeb前端团队

HTML5的这些api你知道吗?

以下是之前学习的一些HTML5 API的总结,在HTML5中有许多功能和接口很值得我们去了解和学习。 页面可见性API--page Visbility 全屏...

1776

扫描关注云+社区