移动前端头部标签(HTML5 head meta)转载

移动web页面头部书写

字数2516 阅读1128 评论0 喜欢30

HTTP 标题信息(http-equiv) 和页面描述信息(name)

http-equiv:
该枚举的属性定义，可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。
最常见的大概属于Content-Type了，设置编码类型。如

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

H5中可以简化为

<meta charset="utf-8">

http-equiv常见还有其它如下等（合理使用可增加 SEO 收录）。

Content-Language : 设置网页语言
Refresh : 指定时间刷新页面
set-cookie : 设定页面 cookie 过期时间
last-modified : 页面最后生成时间
expires : 设置 cache 过期时间
cache-control : 设置文档的缓存机制
...

name:
该属性定义了文档级元数据的名称。用于对应网页内容，便于搜索引擎查找分类，如 keywords, description; 也可以使用浏览器厂商自定义的 meta， 如 viewport；

viewport可视区域的定义，如屏幕缩放等。

告诉浏览器如何规范的渲染网页。

<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）上依然无法缩放。

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识别

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

meta标签表示：告诉设备忽略将页面中的数字识别为电话号码

<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里多个属性的设置一定要用分号+空格来隔开，如果不规范将不会起作用。

一、<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类型有：

1、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（英文）、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、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等语言代码。

二、<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;}）

三、<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屏幕可以支持双倍，但是不支持，图片显示不出来。

四、<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>

感谢你的阅读，本文由 前端开发博客 版权所有，转载时请注明出处，违者必究，谢谢你的合作。
注明出处格式：前端开发博客 (http://caibaojian.com/mobile-meta.html)