在此所说的移动平台前端开发是指针对高端智能手机(如Iphone、Android)做站点适配也就是WebApp,并非是针对普通手机开发Wap 2.0,所以在阅读本篇文章以前,你需要对webkit内核的浏览器有一定的了解,你需要对HTML5和CSS3有一定的了解。如果你已经对此有所了解,那现在就开始往下阅读吧……
1、首先我们来看看webkit内核中的一些私有的meta标签,这些meta标签在开发webapp时起到非常重要的作用
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
第一个meta标签表示:强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览;
第二个meta标签是iphone设备中的safari私有meta标签,它表示:允许全屏模式浏览;
第三个meta标签也是iphone的私有标签,它指定的iphone中safari顶端的状态条的样式;
第四个meta标签表示:告诉设备忽略将页面中的数字识别为电话号码
2.QueryMobile 典型的页面布局
根据data-role属性做组件渲染,page包含head、navbar、content ,page
为显示设备可视区域的一屏,多个page可以放在一个页面或一个独立的HTML页面。
今天简单的做了一个页面,需要的可以参考参考:
代码(需自己下载JQUERYMOBILE 相关文件哦):
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.css" />
<script src="http://jt.875.cn/js/jquery.js"></script>
<script src="jquery.mobile-1.1.1.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-theme="c">
<a href="index.html" data-icon="delete">返回</a>
<h1>头部</h1>
<a href="index.html" data-icon="check" data-theme="b">收藏</a>
</div>
<form action="">
<div data-role="fieldcontain">搜索:
<input name="" id="searchinput1" placeholder="" value="" type="search">
</div>
</form>
<div data-role="navbar" data-iconpos="right">
<ul>
<li >
<a href="#page1" data-transition="fade" data-theme="b" data-icon="" >
首页
</a>
</li>
<li>
<a href="#page1" data-transition="fade" data-theme="b" data-icon="">
内页1
</a>
</li>
<li>
<a href="#page1" data-transition="fade" data-theme="b" data-icon="">
内页2
</a>
</li>
<li>
<a href="#page1" data-transition="fade" data-theme="b" data-icon="">
内页3
</a>
</li>
</ul>
</div>
<div data-role="content" id="other_content">
<p>t内容页t内容页t内容页t内容页t内容页t内容页t内容页t内容页
<a href="#home">Home page</a>
</p>
<p>t内容页t内容页t内容页t内容页容页t内容页容页t内容页容页t内容页容页t内容页容页t内容页容页t内容页容页t内容页容页t内容页t内容页t内容页t内容页t内容页
<a href="#home">Home page</a>
</p>
</div>
<ul data-role="listview" data-divider-theme="b" data-inset="true">
<li data-role="list-divider" role="heading">
新闻列表
</li>
<li data-theme="c">
<a href="#" > 龙润茶好茶</a>
</li>
<li data-theme="c">
<a href="#" data-transition="slide">
生态家
</a>
</li>
<li data-theme="c">
<a href="#" data-transition="slide">
你好 列表1
</a>
</li>
<li data-theme="c">
<a href="#" data-transition="slide">
你好 列表1
</a>
</li>
<li data-theme="c">
<a href="#" data-transition="slide">
你好 列表1
</a>
</li>
</ul>
<form action="echo.cfm" method="post">
<h2>登录框:</h2>
<div data-role="fieldcontain">
<label for="name">Name:</label>
<input type="text" name="name" id="name" value="" />
</div>
<div data-role="fieldcontain">
<label for="email">Email:</label>
<input type="text" name="email" id="email" value="" />
</div>
<div data-role="fieldcontain">
<input type="submit" name="submit" value="登录" />
</div>
</form>
<div data-role="footer" data-position="fixed" data-theme="b">
<h4>My Footer</h4>
</div>
</div>
</body>
</html>