(转)Ratchet教程：meta与link标签

做者：大漠日期： 2014-04-29

经过《Ratchet教程：安装》一文，你们对Ratchet有了一个初步的了解。那么从这一节开始，咱们一块儿来开始实战。经过实战来更好的学习和了解Ratchet，更但愿学习了Ratchet以后，你们在制做移动页面的时候能够高呼“so easy!”前端

若是你看了上篇的文章介绍，能够清晰的记得里面有一个简单的模板：html5

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Ratchet template page</title>

        <!-- Sets initial viewport load and disables zooming -->
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

        <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <!-- Include the compiled Ratchet CSS -->
        <link href="/css/ratchet.css" rel="stylesheet">

        <!-- Optionally, include either the iOS or Android theme -->
        <link href="/css/ratchet-theme-ios.css" rel="stylesheet">

        <!-- Include the compiled Ratchet JS -->
        <script src="/js/ratchet.js"></script>
    </head>
    <body>
        ....
    </body>
</html>

meta标签

不少人认为这不就是一个普通的头部内容吗？是的，他们很普通。熟悉的DTD文档,熟悉的字符编码“utf-8”。但这些并是不最重要的，重要的是里面的<meta>标签，这些<meta>标签在移动开发中是必不可少的一部分。虽然这样的文章介绍在网上能够处处找到，但了能让你们更系统的玩转Ratchet。特地将网上介绍<meta>标签功能集合在此，以供你们参考。android

禁止屏幕缩放

在Ratchet模板中提供的第一个<meta>标签是有关于屏幕缩放的：ios

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

其实有关于禁止缩放屏幕的<meta>标签，你们平时看到的比较多的应该是下面这种：css3

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

相比之下，其实第一种比第二种多了一个参数minimal-ui。而这个参数主要功能是让iOS7.1设备中的Safari移动地址栏和下面的工具条。以下图对比：web

未加minimal-ui的效果：chrome

已加minimal-ui的效果：浏览器

网上有同窗作过测试，minimal-ui目前只有iOS7.1中的Safari浏览器支持，其余浏览器会报以下错误“The key "minimal-ui" is not recognized and ignored”。

其中content每一个值具体描述以下表所示：

content属性值	详细描述
width	可视区域的宽度，其值能够是一个具体数字或关键词device-width
height	可视区域的高度，其值能够是一个具体数字或关键词device-height
initial-scale	页面首次被显示时可视区域的缩放级别，取值为1.0时将使页面按实际尺寸显示，无任何缩放
minimun-scale	可视区域的最小缩放级别，表示用户能够将页面缩小的程度，取值为1.0时将禁止用户缩小至实际尺寸如下
maximun-scale	可视区域的最大缩放级别，表示用户能够将页面放大的程序，取值为1.0时将禁止用户放大至实际尺寸以上
user-scalable	指定用户是否能够对页面进行缩放，设置为yes将容许缩放，no为禁止缩放
minimal-ui	iOS7.1移动端Safari浏览器不显示地址栏和工具栏

针对上表，在Ratchet中的：

<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

具备如下功能：

强制让文档与设备的宽度保持1:1
文档最大的宽度比例是1.0(initial-scale初始刻度值和maximun-scale最大刻度值)
禁止用户手动放大，使用页面在设备上固定其大小

有关于视窗meta标签的详细介绍，能够点击《视窗meta标签的理解》一文。

容许全屏模式浏览

这个功能是iPhone设备中Safari私有<meta>标签，表示：容许全屏模式浏览。

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

改变顶部状态条样式

这个<meta>标签和上一个是同样的，一样是iPhone中Safari私有标签，主要用来指定iPhone中Safari顶端的状态条的样式：

<meta name="apple-mobile-web-app-status-bar-style" content="black">

其余meta标签

在Mobile开发中，其实不只仅这几个<meta>标签实用，在《移动平台WEB前端开发技巧汇总》和《移动平台对 meta 标签的定义》有作过一些详细的整理。在这里重复摘进来：

忽略页面中的数字识别为电话号码

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

网站开启对 web app 程序的支持

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

如何去除Android平台中对邮箱地址的识别

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

然而<meta>标签不只仅这些，感兴趣的同窗能够阅读下面的文章：

link标签

文档头部link标签就要是用来加载样式的一个标签，但在Web的移动开发，link标签还具备其余的功能。咱们先来看最多见的功能。

link加载样式

在模板中，咱们能够看到有一句这样的代码：

<link href="/css/ratchet.css" rel="stylesheet">

这句代码主要是用来加载Ratchet框架的CSS文件，其实在下载的框架中还有一个ratchet.min.css样式文件，你也能够直接加载这个文件：

<link href="/css/ratchet.min.css" rel="stylesheet">

不过这里有一个细节上的处理。可能不少同窗直接这样加载，在你的本地虚拟器之上看到的页面是没有样式效果的，以下图所示：

很明显咱们样式没有加载成功，若是你不确认，可使用浏览器排错工具验证：

从上图能够知道，咱们的样式文件没有加载成功，此时你只须要根据本身的项目结构，调整路径：

<link href="css/ratchet.css" rel="stylesheet">

从新刷新你的浏览器，你能够看到效果出来了：

这或许是Ratchet独特的不同，以至不少同窗看完第一篇文章，或者没有看完文章，直击下载案例，在本身的浏览器中没有效果。其实按这样的思路来作，你就算是没有昨天介绍的运行环境，你只须要修改加载进来的文件路径，你也能看到页面效果。

接着往下看，在模板中还有一个专门为iOS提供的主题样式文件：

<link href="/css/ratchet-theme-ios.css" rel="stylesheet">

具体文件中包括什么代码，在这里咱们就不纠结了，咱们先看看没有加载这个样式文件的效果：

加上以后，顶部效果就变了：

在Ratchet框架中，除了有iOS的主题文件以外，还有为ratchet-theme-android.css文件，若是你是为Android服务，能够加上这个样式文件。为了更好的对比他们的区别，我从官网上截了几个效果图：

在移动开发中link除了用来加载样式文件以外，还有另外一个用处，能够用来作Web APP的icon和启动界面的设置。下面这段介绍摘自于liudy的《移动平台对 meta 标签的定义》一文，以供你们参考。

<link rel="apple-touch-icon-precomposed" href="iphone_logo.png" />

这个link就是设置 Web App 的放置主屏幕上 icon 文件路径。

使用：

该路径须要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
图片尺寸能够设定为 57*57（px）或者 Retina 能够定为 114*114（px），iPad 尺寸为 72*72（px）

<link rel="apple-touch-startup-image" href="logo_startup.png" />

这个 link 就是设置启动时候的界面。

使用：

放置的路径和上面同样。
官方规定启动界面的尺寸必须为 320*640（px），本来觉得 Retina 屏幕能够支持双倍，可是不支持，图片显示不出来。

若是对 Web App 的这两个 meta 还有不能详细理解的能够查看官方解释：Meta Tags。

关于 link 方面还有更多的参数设置（例如：iPod、iPad、iPhone 不一样尺寸不一样图标），能够查看官方标准文档：Configuring Web Applications。

总结

在这一节中以Rathect框架模板文件头部为主导，从新罗列了meta和link标签在移动开发中的做用与功能。详细介绍了模板中所用到的meta标签功能。同时搜集了部分网上有关于这方面的介绍。但愿这些标签功能对你们从此的开发有所帮助。

若是你感兴趣，请持续观注本站有关于Ratchet框架相关的更新，若是您对这方面有必定的使用经验或有填过相关的坑，欢迎与咱们一块儿分享。

如需转载，烦请注明出处：http://www.w3cplus.com/mobile/meta-and-link-tags-for-ratchet.html