任务:
上下边栏:绝对定位或者fixed.相对独立,所以可以放到一个相对独立过程中去。
然后就是内容区:标题,内容,操作条 。
引用normailze.css,zepto.min.js,jquery.base64.js,jquery.jsonp.js
Zepto是为现代智能手机浏览器推出的Javascript 框架, 有和jQuery相似的语法,不过更小
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
- width – // viewport 的宽度 (范围从 200 到 10,000,默认为 980 像素)
- height – // viewport 的高度 (范围从 223 到 10,000 )
- initial-scale – // 初始的缩放比例 (范围从 > 0 到 10)
- minimum-scale – // 允许用户缩放到的最小比例
- maximum-scale – // 允许用户缩放到的最大比例
- user-scalable – // 用户是否可以手动缩放 (no,yes)
<meta name="format-detection" content="telephone=no">
格式识别
忽略页面中的数字识别为电话号码
- 使设备浏览网页时对数字不启用电话功能(不同设备解释不同,iTouch 点击数字为存入联系人,iPhone 为拨打电话),忽略将页面中的数字识别为电话号码。
- 若需要启用电话功能将 telephone=yes 即可,若在页面上面有 Google Maps, iTunes 和 YouTube 的链接会在ios设备上打开相应的程序组件。
- 结构和样式都是从大局观开始,然后再抠细节
- 如果想要好看,还是需要靠自己一点一点的量(位置,颜色)
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,minimal-ui">
<meta name="format-detection" content="telephone=no">
<meta name="author" contect="hanxiao, 15132445252@163.com" />
<link rel="stylesheet" href="css/normailze.css">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<