移动web页面头部书写
HTTP 标题信息(http-equiv) 和页面描述信息(name)javascript
http-equiv:
该枚举的属性定义，能够改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来讲便可以模拟 HTTP 协议响应头。
最多见的大概属于Content-Type了，设置编码类型。如css
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
H5中能够简化为html
<meta charset="utf-8">
http-equiv常见还有其它以下等（合理使用可增长 SEO 收录）。前端
Content-Language : 设置网页语言
Refresh : 指定时间刷新页面
set-cookie : 设定页面 cookie 过时时间 last-modified : 页面最后生成时间 expires : 设置 cache 过时时间 cache-control : 设置文档的缓存机制 ...
name:
该属性定义了文档级元数据的名称。用于对应网页内容，便于搜索引擎查找分类，如 keywords, description; 也可使用浏览器厂商自定义的 meta， 如 viewport；html5
viewport可视区域的定义，如屏幕缩放等。java
告诉浏览器如何规范的渲染网页。ios
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
这个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，而且文档最大的宽度比例是1.0，且不容许用户点击屏幕放大浏览；若是想设置用户能够进行缩放 user-scalable=yes;可是手机浏览器（UC）上依然没法缩放。web
width – // [pixel_value | device-width] viewport 的宽度，范围从 200 到 10,000，默认为 980 像素 height – // [pixel_value | device-height ] viewport 的高度，范围从 223 到 10,000 initial-scale – // float_value，初始的缩放比例 （范围从 > 0 到 10） minimum-scale – // float_value，容许用户缩放到的最小比例 maximum-scale – // float_value，容许用户缩放到的最大比例 user-scalable – // [yes | no] 用户是否能够手动缩放 target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 目标屏幕像素密度
format-detection对电话号码的识别&&email对EMAIL识别sql
<meta content="telephone=no" name="format-detection" />
meta标签表示：告诉设备忽略将页面中的数字识别为电话号码chrome
<meta name="format-detection" content="email=no" />
容许合写：
<meta name="format-detection" content="telphone=no, email=no" />
no-cache缓存控制
<meta http-equiv="Cache-Control" content="no-cache"/>
没有这句话的话，WAP 浏览器将仅仅显示缓存中的文档的复本, 而不须要每次刷新都链接服务器。某些 WAP 浏览器不支持用 <meta/> 标签来控制缓存, 但它们确实知道 HTTP 头 "Cache-Control: no-cache" 的意思. 这种状况下, 解决方案是在服务器端的 HTTP 响应中设置 HTTP 头.
IOS私有属性
apple-mobile-web-app-capable 启用 webapp 模式, 会隐藏工具栏和菜单栏，和其它配合使用。
<meta content="yes” name=" apple-mobile-web-app-capable" />
meta标签是iphone设备中的safari私有meta标签，它表示：容许全屏模式浏览；
apple-mobile-web-app-status-bar-style在webapp模式下，改变顶部状态条的颜色。
<meta content="black" name=" apple-mobile-web-app-status-bar-style" />
meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式，default(白色，默认) | black(黑色) | black-translucent(半透明)
apple-touch-startup-image在 webapp 下，设置启动时候的界面;
<link rel="apple-touch-startup-image" href="/startup.png" />
不支持 size 属性，可使用 media query 来控制。iphone 和 touch 上，图片大小必须是 230*480 px,只支持竖屏;
apple-touch-icon在webapp下，指定放置主屏幕上 icon 文件路径;
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
默认 iphone 大小为 60px, ipad 为 76px, retina 屏乘2；
如没有一致尺寸的图标，会优先选择比推荐尺寸大，可是最接近推荐尺寸的图标。
ios7之前系统默认会对图标添加特效（圆角及高光），若是不但愿系统添加特效，则能够用apple-touch-icon-precomposed.png代替apple-touch-icon.png
其余meta
<meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，好比黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no">
窗口大小
Apple为了解决移动版Safari的屏幕分辨率大小问题，专门定义了viewport虚拟窗口，它的主要做用是容许开发者建立一个虚拟的窗口，并自定义其窗口的大小缩放功能。
若是开发者没有定义这个模拟窗口，移动版Safari的虚拟窗口默认大小980像素。如今，除了Safari的浏览器外，其余浏览器也支持viewPort虚拟窗口。可是，不一样的浏览器对viewport窗口的默认大小支持都不一致。
虚拟窗口（layout viewport）
移动浏览器默认状况下把 viewport 设置为一个比较宽的值（防止太窄而在可视区域中显示错乱）。该默认的 viewport 称为 layout viewport。
宽度可经过 Js 获取(基本全部设备都支持)
document.documentElement.clientWidth document.documentElement.clientHeight
视觉窗口（visual viewport）
浏览器可视区域大小。可理解为手机物理屏幕。
宽度可经过 Js 获取(不支持Android2, Opera Mini, UC8)
window.innerWidth window.innerHeight
ideal viewport
由Peter-Paul Koch提出的一种概念，一个完美适配移动设备的 viewport。理想状态是不须要用户缩放和横向滚动条就能正常查看，显示的文字大小合适，不区分分辨率，屏幕密度等。
meta viewport
移动端默认使用的是 layout viewport ，而咱们想要达到相似 ideal viewport 的效果的话，能够经过 meta 标签来对 viewport 进行控制。
web开发须知
开发触摸屏你须要触摸事件，而且hover事件失效，使用tap事件替换click事件。
关于适配不一样分辨率的屏幕，一般使用两倍像素的图片。
移动端设备对于Web Storage的支持状况比较理想。
Touch触控事件
touchstart 手指放在一个DOM元素上不放时出发事件
touchmove手指拖拽一个DOM元素时触发事件
touchend手指从一个DOM元素中移开时触发事件
除了上述的标准触摸事件外，SenchaTouch还自定义了很是多的事件，分别以下：
touchdowm 手机触摸屏幕时触发事件
dragstart 拖拽DOM元素前触发事件
drag拖拽DOM元素时触发事件
dragend 拖拽DOM元素后触发事件
singletap 和tap事件类型
tap 手指触摸屏幕并迅速的离开屏幕
doubletap手指连续两次放在DOM元素上后触发事件
taphold触摸并保持一段时间后触发事件
tapcancle触摸中断事件
swipe滑动时触发事件
pinch 手指按捏一个DOM元素时触发事件
pinchstart 手指按捏一个DOM元素以前触发事件
pinchend手指按捏一个DOM元素以后触发事件
屏幕大小适配Css文件
<link rel='stylesheet' media='screen and(max-width:600px)' href='small.css'/>
在small.css样式文件内，须要定义media类型的样式，例如：
@media screen and (max-width:600px){ .demo{ background-color:#ccc; } }
当屏幕可视区域的宽度长度600px和900px之间时，应用该样式文件。导入Css文件写法以下：
<link rel='stylesheet' media='screen and(min-width:600px)and(max-width:900px)'href='small.css'></link>
small.css样式文件内对应写法以下：
@media screen and（min-width:600px）and(max-width:900px){ .demo{ …… } }
当文件最大屏幕但是去为480像素时，应用该样式文件。导入CSS文件写法以下：
<link rel='stylesheet' media='screen and(max-device-width:480px)' href='small.css'></link>
small.css样式文件内对应写法以下：
@media screen and(max-device-width:480px){ .demo{ background-color:#ccc; } }
根据方向适配文件
<link rel='stylesheet' media ='all and(orientation:portrait)' href='portrait.css'/> <link rel='stylesheet' media='all and(orientation:landscape)' href='landscape.css'/>
媒体查询语法
@media [media_query] media_type and media_feature
使用Media Queries样式模块时都必须‘@media’方式开头。media_query表示查询关键字，在这里可使用not关键字和only关键字。not 关键字和only关键字。not关键字表示对后面的样式表达式执行取反操做。
@media not screen and (max-device-width:480px)
only关键字的做用是，让不支持MediaQueries 的设备但能读取 Media Type 类型的浏览器忽略这个样式。例如以下代码：
@media only screen and (max-device-width:480px)
导入Media Queries 样式文件,在首页的HTML文件的head元素内新增如下Media Queries 样式文件模块；
<link rel='stylesheet' type='text/css' media='only screen and(max-width:480px),only screen and (max-device-width)' href='/resources/style/device.css'/>
移动设备对meta的定义
如下是meta每一个属性详解
尤为要注意的是content里多个属性的设置必定要用分号+空格来隔开，若是不规范将不会起做用。
1、<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> //编码
META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的标记和 标题 <<标记之间，它提供用户不可见的信息。meta标签一般用来为搜索引擎robots定义页面主题，或者是定义
用户浏览器上的cookie；它能够用于鉴别做者，设定页面格式，标注内容提要和关键字；还能够设置页面使其能够根据你定义的时间间隔刷新本身，以及设置RASC内容等级，等等。
详细介绍
下面介绍一些有关 标记的例子及解释。
META标签分两大部分：HTTP标题信息（HTTP-EQUIV）和页面描述信息（NAME）。
★HTTP-EQUIV
HTTP-EQUIV相似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。经常使用的HTTP-EQUIV类型有：
一、Content-Type和Content-Language （显示字符集的设定）转自环 球 网校edu24ol.com转自环 球 网校edu24ol.com转自环 球 网校edu24ol.com
说明：设定页面使用的字符集，用以说明主页制做所使用的文字已经语言，浏览器会根据此来调用相应的字符集显示page内容。
<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312"> <Meta http-equiv="Content-Language" Content="zh-CN">
注意： 该META标签订义了HTML页面所使用的字符集为GB2132，就是国标汉字码。若是将其中的“charset=GB2312”替换成“BIG5”，则该页面所用的字符集就是繁体中文Big5码。当你
浏览一些国外的站点时，IE浏览器会提示你要正确显示该页面须要下载xx语支持。这个功能就是经过读取HTML页面META标签的Content-Type属性而得知须要使用哪一种字符集显示该页面的。如
果系统里没有装相应的字符集，则IE就提示下载。其余的语言也对应不一样的charset，好比日文的字符集是“iso-2022-jp ”，韩文的是“ks_c_5601”。
Content-Type的Content还能够是：text/xml等文档类型；
Charset选项：ISO-8859-1（英文）、BIG五、UTF-八、SHIFT-Jis、Euc、Koi8-二、us-ascii， x-mac-roman， iso-8859-2， x-mac-ce， iso-2022-jp， x-sjis， x-euc-jp，
euc-kr， iso-2022-kr， gb2312， gb_2312-80， x-euc-tw， x-cns11643-1，x-cns11643-2等字符集；Content-Language的Content还能够是：EN、FR等语言代码。
2、<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>//屏幕的缩放
1. viewport：
也就是可视区域。对于桌面浏览器，咱们都很清楚viewport是什么，就是出去了全部工具栏、状态栏、滚动条等等以后用于看网页的区域，
这是真正有效的区域。因为移动设备屏幕宽度不一样于传统web,所以咱们须要改变viewport;
实际上咱们能够操做的属性有4 个：
width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素） height - // viewport 的高度 （范围从223 到10,000） initial-scale - // 初始的缩放比例 （范围从>0 到10） minimum-scale - // 容许用户缩放到的最小比例 maximum-scale - // 容许用户缩放到的最大比例 user-scalable - // 用户是否能够手动缩 (no,yes) <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" >
第一个meta标签表示：
强制让文档与设备的宽度保持1：1；
文档最大的宽度比列是1.0（initial-scale初始刻度值和maximum-scale最大刻度值）；
user-scalable定义是否可缩放（0为不缩放），使页面固定设备上面的大小。
（注意：实际测试中发现，HTC G7自身系统浏览器不支持这一条规则，可以对页面进行放大，一旦放大响应的box也随之放大，致使俄页面出现错乱问题，解决方法：定义页面的最小宽度min-width，body{min-width: 300px;}）
3、<meta name=”apple-mobile-web-app-capable” content=”yes” /> // 离线应用的另外一个技巧 <meta name=”apple-mobile-web-app-status-bar-style” content=black” /> // 隐藏状态栏\
说明：网站开启对web app程序的支持。
这里要详细的介绍一下ios设备对这两个meta的功能做用（外界通称该应用为“离线app”，但从字面意思上面会有误解，觉得只能脱离网络，因此在这里我仍是用web app描述。）：
该meta能够看出内容为“苹果设备web 应用程序xx”，就是说该meta是专门定义web 应用的.
说明：
在web app应用下状态条（屏幕顶部条）的颜色；
默认值为default（白色），能够定为black（黑色）和black-translucent（灰色半透明）。
注意：
若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。
纠正：以前查阅了一些资料，说apple-mobile-web-app-status-bar-style属性为隐藏状态栏，其实这是一个误解，在这里为你们纠正一下这个问题。
苹果web app其余设置：
固然，配合web app的icon 和 启动界面须要额外的两端代码进行设定，以下所示：
<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />
说明： 这个link就是设置web app的放置主屏幕上icon文件路径。
使用：
该路径须要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
图片尺寸能够设定为57*57（px）或者Retina能够定为114*114（px），ipad尺寸为72*72（px）
<link rel="apple-touch-startup-image" href="milanoo_startup.png" />
说明：
这个link就是设置启动时候的界面，放置的路劲和上面相似。
使用：
该路径须要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
官方规定启动界面的尺寸必须为 320*640（px），本来觉得Retina屏幕能够支持双倍，可是不支持，图片显示不出来。
4、<meta content="black" name="apple-mobile-web-app-status-bar-style" /> //指定的iphone中safari顶端的状态条的样式 <meta content="telephone=no" name="format-detection" /> <meta content="email=no" name="format-detection" />//将不识别邮箱
告诉设备忽略将页面中的数字识别为电话号码
使设备浏览网页时对数字不启用电话功能（不一样设备解释不一样，itouch点击数字为存入联系人，iphone为拨打电话），忽略将页面中的数字识别为电话号码。
若须要启用电话功能将telephone=yes便可，具体调用格式能够这样书写代码<a href=”13888888888″>Call Me</a>，若在页面上面有google maps, iTunes和youtube的连接会在ios设备上打开相应的程序组件。
<meta name="Author" contect="Mr.He"/ > //做者姓名
移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析html代码，更好地将移动web前端页面表现出来。本文整理一些经常使用的meta标签。
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页做者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 为移动设备添加 viewport -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 会致使 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->
<!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，好比黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS 图标 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina iPhone 和 Retina iTouch，114x114 像素，能够没有，但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina iPad，144x144 像素，能够没有，但推荐有 -->
<!-- iOS 图标 end -->
<!-- iOS 启动画面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- iPad 竖屏 768 x 1004（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 竖屏 1536x2008（Retina） -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- iPad 横屏 1024x748（标准分辨率） -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPad 横屏 2048x1496（Retina） -->
<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<!-- iOS 启动画面 end -->
<!-- iOS 设备 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁贴图标 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 订阅 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->
<!-- sns 社交标签 begin -->
<!-- 参考微博API -->
<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
<!-- sns 社交标签 end -->
<title>标题</title>
</head>