注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

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

2015-05-27 20:24:45|  分类: 移动端专题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
之前给大家介绍的是淘宝在使用的移动端框架——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)

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

2、body设置宽度,是根据psd图来设置,有多宽设置多宽
3、引入metahandler.js框架

<!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>
<!-- 引入MetaHandler.js -->
<script type="text/javascript" src="js/MetaHandler.js"></script>

</body>
</html>


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

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


四:
部分浏览器测试结果
metahandler.js——移动端适配各种屏幕无痛工具脚本 - 梦幻雪冰 - 梦幻雪冰metahandler.js——移动端适配各种屏幕无痛工具脚本 - 梦幻雪冰 - 梦幻雪冰metahandler.js——移动端适配各种屏幕无痛工具脚本 - 梦幻雪冰 - 梦幻雪冰metahandler.js——移动端适配各种屏幕无痛工具脚本 - 梦幻雪冰 - 梦幻雪冰
 
五:横屏存在的兼容问题(测试地址http://c.3g.163.com/CreditMarket/default.html
metahandler.js——移动端适配各种屏幕无痛工具脚本 - 梦幻雪冰 - 梦幻雪冰
 
metahandler.js——移动端适配各种屏幕无痛工具脚本 - 梦幻雪冰 - 梦幻雪冰

六:metahandler.js应用成功案例
1、http://c.3g.163.com/CreditMarket/default.html
2、http://m.deja.me/topics/#/special/9
3、http://impicture.lofter.com/


欢迎学习交流——梦幻雪冰独行冰海@font-face中iefix的详解 - 梦幻雪冰 - 梦幻雪冰
梦幻雪冰微博——梦幻雪冰
HTML5学堂贴吧——HTML5学堂
HTML5学堂微博——HTML5学堂
HTML5学堂官网——HTML5学堂
HTML5学堂微信
setInterval和setTimeout参数剖析 - 梦幻雪冰 - 梦幻雪冰
  评论这张
 
阅读(783)| 评论(11)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017