移动端H5知识[系列] - 固定像素的实现方法
移动端H5知识[系列] - 固定像素的实现方法
HTML5学堂
发布于 2018-03-12 16:51:45
发布于 2018-03-12 16:51:45
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是可以忽略的。另外，对于横屏转回到纵屏的时候，实际上我们是可以进行设备方向检测，然后再触发一次页面刷新，就不会出现纵屏上的问题了~
最后的话：我们使用了这个框架进行页面的开发，但是最近在使用时，感觉到在一些浏览器当中有些卡顿，用同样的设备和浏览器去测试了网易的手机页面，倒是没有什么卡顿现象，关于卡顿的问题，目前还在思考当中~~~
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2016-01-06，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录