移动端直用px加js代码实现

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

2015-05-27 20:24:45| 分类：移动端专题 | 标签：移动端 meta metahandler.js 视口 viewport |举报|字号订阅

之前给大家介绍的是淘宝在使用的移动端框架——flexible.js，今天要给大家分享的是网易前端小组在使用的移动端框架——metahandler.js。这两个框架的使用原理差别比较大，flexible.js主要是控制html标签的字体大小，再结合rem单位进行实现移动端页面，然而metahandler.js是控制viewport进行页面的缩放，再结合px单位进行实现移动端页面。

这两个框架各有各自的优点，flexible.js因为是控制rem进行页面的缩放，有些浏览器对rem的支持程度还不是很完善，导致页面出现一些布局问题，metahandler.js是靠控制viewport进行页面的缩放，但是在横屏的时候出现页面缩放问题（等下文章会讲解到），还有就是有些浏览器禁止缩放。个人觉得如果要让移动端页面完美的兼容各个平台，各个移动端浏览器，是一件比较困难的事情，不是一两句代码就能解决的问题。

metahandler.js可以让（用px单位实现的页面）宽度固定死的移动端页面适应不同的屏幕大小，具体我们来看看下面的内容。

一：大家先下载metahandler.js——点击下载访问密码 9074

二：准备一个用px实现的移动页面（宽度固定死的页面），引入metahandler.js框架

1、视口设置

width=640，是根据psd图来设置，有多宽设置多宽（设计图是640的设置640）

2、body设置宽度，

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5Course - 梦幻雪冰</title>
<meta content="target-densitydpi=device-dpi,width=640" name="viewport">
<link rel="stylesheet" href="css/reset.css">
<style>
body {
/*设置跟psd一样的宽度*/
width: 640px;
margin: 0 auto;
background-color: #f0eff4;
}
.wrap header {
position: relative;
height: 78px;
line-height: 78px;
background-color: #f9f9f9;
font-size: 32px;
text-align: center;
}
.wrap header em,
.wrap header span {
position: absolute;
top: 0;
width: 90px;
height: 78px;
}
.wrap header span {
left: 0;
background: url("images/back.png") no-repeat;
background-size: 100%;
}
.wrap header em {
right: 0;
background: url("images/search.png") no-repeat;
background-size: 100%;
}
.con {
padding: 24px 17px 0;
}
.con nav a {
float: left;
width: 146px;
height: 146px;
margin-bottom: 10px;
line-height: 146px;
font-size: 22px;
text-align: center;
}
.con nav a:nth-child(1) {
width: 299px;
background-color: #e66444;
}
.con nav a:nth-child(2) {
margin: 0 7px;
background-color: #f09056;
}
.con nav a:nth-child(3) {
background-color: #a2c159;
}
.con nav a:nth-child(4) {
background-color: #9178af;
}
.con nav a:nth-child(5) {
margin: 0 7px;
background-color: #49a7da;
}
.con nav a:nth-child(6) {
margin-right: 7px;
background-color: #56bc8a;
}
.con nav a:nth-child(7) {
background-color: #d179ad;
}
</style>
</head>
<body>
<div class="wrap">
<header><span></span>梦幻雪冰<em></em></header>
<section class="con">
<nav class="clearfix">
<a href="" title="">团上团下</a>
<a href="" title="">在线订餐</a>
<a href="" title="">报修申请</a>
<a href="" title="">地铁线路</a>
<a href="" title="">公交站点</a>
<a href="" title="">社区超市</a>
<a href="" title="">今日优惠</a>
</nav>
</section>
</div>

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

</html>

三：metahandler.js里面参数的设置

// 调用自适应屏幕的功能函数，640是根据psd图来设置，有多宽设置多宽
opt.fixViewportWidth(640);

四：部分浏览器测试结果

五：横屏存在的兼容问题（测试地址http://c.3g.163.com/CreditMarket/default.html）

六：metahandler.js应用成功案例

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

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

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