通俗的讲,就是为移动设备开发网页。伴随着3G时代的到来、浏览器技术的不断进步,越来越多的人开始离开PC,使用手中的移动设备(手机、PSP、平板)上网。如果您是一个注意生活细节的人,那么在您乘坐地铁、公交的时候,请认真看看你周围的人都在干什么?是不是每人抱着一个手机在听音乐、看新闻、聊天呢?
作为一个开发人员,如何开发出更适合于移动设备的网页呢?如何让您的站点能被多数移动设备更轻松地访问?本系列文章将会一一的为您解答。
当今最受欢迎的手机系统包括 Android,iPhone ,Symbian,BlackBerry 与Web OS。这些系统浏览器都是基于webkit核心,而webkit号称是一款全功能的移动浏览器,支持 HTML + CSS + JavaScript,但由于移动设备本身与PC的差异,导致我们开发的网页在移动设备上总是会存在一些不如人意的地方。
首先我们要接触的第一个概念就是“viewport”,翻译为中文可以叫做“视区”,大家都知道移动设备的屏幕一段都比PC小很多,webkit浏览器会将一个较大的“虚拟”窗口映射到移动设备的屏幕上,默认的虚拟窗口为980像素宽(目前大部分网站的标准宽度),然后按一定的比例(3:1或2:1)进行缩放。也就是说当我们加载一个普通网页的时候,webkit会先以980像素的浏览器标准加载网页,然后再缩小为490像素的宽度。注意这个缩小是一个全局缩小,也就是页面上的所有元素都会缩小。如下图所示,一个普通的文章页面在移动设备的效果:
页面以980像素加载,没为变形,但是按比例缩放后,已经没有多少东西是可以用肉眼看清的了,好在一般的移动设备都支持屏幕放大。放大之后,我们才能看清屏幕上的内容。
怎么样,对viewport的概念有一定的了解了吧?那么我们能不能人为改变webkit的视区呢?当然能,在<head>与</head>之间加上如下视区代码:
<meta name="viewport" content="width=500" />
<meta name="viewport" content="width=device-width" />
device-width将自动检测移动设备的屏幕宽度。
怎么样?满意了吧?所有页内容都和移动设备屏幕自适应。
下面我们以一个列表页面为例,讲解一下如何让我们开发的页面能够在移动设备上完美的呈现。原始页面台下图所示:
代码如下所示:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="user-scalable=no,width=device-width" /> <title>列表</title> </head> <body> <div id="header"> <h1><a href="#">移动web列表演示</a></h1> </div> <div id="nav"> <ul id="taskList"> <li><a href="pre.html">准备会议资料</a></li> <li><a href="webmeeting.html">参加关于移动web开发的技术讨论会</a></li> <li><a href="meetingjack.html ">会见客户Jack</a></li> <li><a href="designdoc.html">整理XX系统设计文档</a></li> </ul> </div> <div id="container"></div> <div id="footer"><span>Copyright © 2010-2015 IdeasAndroid. All rights reserved.</span></div> </body> </html>
下面,我们介绍一个简单的概念,大家知道,我们开发的web页面需要在不同的设备上显示,我们需要在不同的设备上使用不同的样式表(CSS),才能让我们的页面显示的更完美。比如说我们开发的页面需要在手机和平板电脑上使用不同的CSS,那么代码如下所示:
<link rel="stylesheet" type="text/css" href="android.css" media="only screen and (max-width: 480px)" /> <link rel="stylesheet" type="text/css" href="tab.css" media="screen and (min-width: 481px)" />
这里media属性就是根据屏幕属性选择不同的CSS,第一个的意思是,只有在屏幕宽度小于480px的时候使用android.css文件,第二个的意思是当屏幕大于481px时,使用tab.css文件。
我们来看看android.css文件:
@CHARSET "UTF-8"; body { background-color: #ddd; color: #222; font-family: Helvetica; font-size: 14px; margin: 0; padding: 0; } #header h1 { margin: 0; padding: 0; } #header h1 a { background-color: #ccc; border-bottom: 1px solid #666; color: #222; display: block; font-size: 20px; font-weight: bold; padding: 10px 0; text-align: center; text-decoration: none; <!–给标题增加1个像素白色的阴影,同时增加一个渐变背景 –> text-shadow: 0px 1px 1px #fff; background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999) ); } #container{ padding: 10px 10px; } #nav ul { list-style: none; margin: 8px; padding: 0; } #nav ul li a { background-color: #FFFFFF; border: 1px solid #999999; color: #222222; display: block; font-size: 17px; font-weight: bold; margin-bottom: -1px; padding: 12px 10px; text-decoration: none; } /* * 给列表第一项增加圆角效果 */ #nav ul li:first-child a { -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; } /* * 给列表最后一项增加圆角效果 */ #nav ul li:last-child a { -webkit-border-bottom-left-radius: 6px; -webkit-border-bottom-right-radius: 6px; } #footer { display: block; padding: 10px 10px; }
#header div.leftButton { font-weight: bold; text-align: center; line-height: 28px; color: white; text-shadow: 0px -1px 1px rgba(0,0,0,0.6); position: absolute; top: 7px; left: 6px; max-width: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-width: 0 8px 0 14px; -webkit-border-image: url(images/back_button.png) 0 8 0 14; -webkit-tap-highlight-color: rgba(0,0,0,0); } #header div.leftButton.clicked { -webkit-border-image: url(images/back_button_clicked.png) 0 8 0 14; }
var hist = []; $(document).ready(function(){ $('#nav a').click(function(e){ e.preventDefault(); loadPage(e.target.href); }); loadPage("null"); }); function loadPage(url) { $('#container').load(url, function(result){ if(url=='null'){ $('#nav').show(); }else{ $('#nav').hide(); } var title = $('h2').html() || '<a>移动web列表演示</a>'; $('h1').html(title); $('h2').remove(); $('.leftButton').remove(); hist.unshift({'url':url, 'title':title}); if (hist.length > 1) { $('#header').append('<div class="leftButton">返回</div>'); $('#header .leftButton').click(function(e){ $(e.target).addClass('clicked'); var thisPage = hist.shift(); var previousPage = hist.shift(); loadPage(previousPage.url); }); }; }); }
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="user-scalable=no,width=device-width" /> <link rel="stylesheet" type="text/css" href="assets/css/android.css" media="only screen and (max-width: 480px)" /> <link rel="stylesheet" type="text/css" href="assets/css/tab.css" media="screen and (min-width: 481px)" /> <link rel="apple-touch-icon-precomposed" href="homeIcon.png" /> <script type="text/javascript" src="assets/js/jquery.js"></script> <script type="text/javascript" src="assets/js/android.js"></script> <title>列表</title> </head> <body> <div id="header"> <h1><a href="#">移动web列表演示</a></h1> </div> <div id="nav"> <ul id="taskList"> <li><a href="pre.html">准备会议资料</a></li> <li><a href="webmeeting.html">参加关于移动web开发的技术讨论会</a></li> <li><a href="meetingjack.html">会见客户Jack</a></li> <li><a href="designdoc.html">整理XX系统设计文档</a></li> </ul> </div> <div id="container"></div> <div id="footer"><span>Copyright © 2010-2015 IdeasAndroid. All rights reserved.</span></div> </body> </html>
如上代码中,我们增加了一行灰色底色的代码:
<link rel="apple-touch-icon-precomposed" href="homeIcon.png" />