移动端开发（一）（初级入门）

上一个项目快上线了，这几天正好bug也少了，组长突然就交给我几张移动端新增板块的psd，让我做移动端的页面。经过各种查阅资料总算做的可以适应各种手机型号的大小屏幕（也是因为这几张psd较简单）。下面就进入正题：

一、meta

　　1、视窗宽度：

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

　　①.width=device-width 是设置视窗宽度为设备视窗宽度，还可以固定宽度，例如： width=640 则是640px的宽度（常见于微信）；

　　②.initial-scale=1.0 ：设置缩放比例为1.0；

　　③.minimum-scale=1.0 和 maximum-scale=1.0 ：最小缩放比例和最大缩放比例；

　　④.user-scalable=no ：禁止用户自由缩放，user-scalable 默认值为 yes 。

　　2.自动识别格式：

<meta name="format-detection" content="telephone=no"/>

　　①.content 里面的参数：telephone=no 是禁止浏览器自动识别手机号码，email=no 是禁止浏览器自动识别Email。

　　正常的话，上面这两个就够了，但是还有下面的一些其他的需求和情况：

　　3.对于苹果：

<meta name="apple-mobile-web-apshangpin-capable" content="yes" />

　　①.name里面的作用是控制状态栏显示样式，这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。

　　4.http:

eg:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

　　http-equiv，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。

　　http-equiv里面可以写很多种：

　　①.<meta http-equiv="content-Type"  content="text/html;charset=utf-8" />

　　设定页面使用的字符集。

　　②.<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />　　  　　　　　Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，

　　响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下
　　Public指示响应可被任何缓存区缓存

　　no-cache指示请求或响应消息不能缓存

　　no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

　　max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应

　　min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应

　　max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息

　　③.<meta http-equiv="Expires" content="0"/>

　　设定网页的到期时间

　　④.<meta http-equiv="Pragma" content="no-cache"/>

　　是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出

　　⑤.<meta http-equiv="Refresh" content="2；URL=http://www.NET.cn/"/>

　　自动刷新并指向新页面。

　　⑥.<meta http-equiv="Pics-label" content=""/>

　　Pics-label(网页等级评定)

　　⑦.<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>

　　关键字,给搜索引擎用的

　　至于其它的js.css大家就自己引入即可。