原文:http://www.w3cplus.com/mobile/meta-and-link-tags-for-ratchet.html

Ratchet教程:meta与link标签     

              作者:大漠        日期:2014-04-29       

通过《Ratchet教程:安装》一文,大家对Ratchet有了一个初步的了解。那么从这一节开始,我们一起来开始实战。通过实战来更好的学习和了解Ratchet,更希望学习了Ratchet之后,大家在制作移动页面的时候可以高呼“so easy!”

如果你看了上篇的文章介绍,可以清晰的记得里面有一个简单的模板:

<!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>标签功能集合在此,以供大家参考。

禁止屏幕缩放

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

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

其实有关于禁止缩放屏幕的<meta>标签,大家平时看到的比较多的应该是下面这种:

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

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

未加minimal-ui的效果:

已加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框架模板文件头部为主导,重新罗列了metalink标签在移动开发中的作用与功能。详细介绍了模板中所用到的meta标签功能。同时搜集了部分网上有关于这方面的介绍。希望这些标签功能对大家今后的开发有所帮助。

如果你感兴趣,请持续观注本站有关于Ratchet框架相关的更新,如果您对这方面有一定的使用经验或有填过相关的坑,欢迎与我们一起分享。

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

(转)Ratchet教程:meta与link标签的更多相关文章

  1. 网页head头部meta和link标签使用大全

    <!-- 声明文档使用的字符编码 --> <meta charset="utf-8"> <!-- 声明文档的兼容模式 --> <meta ...

  2. (转)Ratchet教程:创建项目

    原文:http://www.w3cplus.com/mobile/how-to-create-mobile-project-width-ratchet.html Ratchet教程:创建项目      ...

  3. html——meta标签、link标签

    <meta> 元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. <meta> 标签位于文档的头部,不包含任何内容.&l ...

  4. HTML Meta标签和link标签

    一.meta 标签 name属性主要用于描述网页,对应于content(网页内容)  1.<meta name="Generator" contect="" ...

  5. (转)Ratchet教程:Buttons组件

    原文:http://www.w3cplus.com/mobile/create-buttons-with-ratchet.html Ratchet教程:Buttons组件               ...

  6. 【131031】rel 属性 -- link标签中的rel属性,定义了文档与链接的关系

    此属性通常出现在a,link标签中 属性值 Alternate -- 定义交替出现的链接 Alternate 属性值 -- alternate是LinkTypes的一个值,网页设计者可以通过此值,设计 ...

  7. HTML5移动开发中的meta与link

    meta HTML5移动开发中的一些webkit专属头部标签,能够帮助浏览器更好的解析HTML代码,从而为HTML5移动开发提供更好的前端表现与体验 viewport网页缩放 1 <meta n ...

  8. meta property=og标签含义及作用

    不理解Meta Property=og标签是什么意思,以及对SEO的影响,看一下下面的介绍.Meta Property=og标签是什么呢?og是一种新的HTTP头部标记,即Open Graph Pro ...

  9. link 标签

    link标签 主要是引用外部文件 rel属性 规定当前文档与被链接文档之间的关系 alternate,author,help,icon,licence,next,pingback,prefetch,p ...

随机推荐

  1. 【转】 Linux chmod命令

    在Unix和Linux的各种操作系统下,每个文件(文件夹也被看作是文件)都按读.写.运行设定权限.例如我用ls -l命令列文件表时,得到如下输出:-rw-r--r-- 1 apple users 22 ...

  2. linux笔记:linux常用命令-网络命令

    网络命令:ping(测试网络连通性) 网络命令:ifconfig(查看和设置网卡信息) 注意:在查看网卡信息时,直接输入ifconfig命令即可. 网络命令:last(列出目前和过去登入系统的用户信息 ...

  3. linux笔记:权限管理命令chmod,chown,chgrp,umask

    权限对文件和目录的含义是不同的:对文件来说:读:可以查看文件内容写:可以修改文件内容执行:可以执行文件对目录来说:读:可以列出目录中的内容写:可以在目录中创建.删除文件执行:可以进入目录 能够更改文件 ...

  4. socket头文件

    一. 三种类型的套接字:1.流式套接字(SOCKET_STREAM)    提供面向连接的可靠的数据传输服务.数据被看作是字节流,无长度限制.例如FTP协议就采用这种.2.数据报式套接字(SOCKET ...

  5. 【Java基础之Object类(一)】Java中Object类中的所有方法(toString、equals、hashCode、clone、finalize、wait和notify等)详解(转载)

    java中的hashcode.equals和toString方法都是基类Object的方法. 首先说说toString方法,简单的总结了下API说明就是:返回该对象的字符串表示,信息应该是简明但易于读 ...

  6. hdu-----(4857)逃生(拓扑排序)

    逃生 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submissi ...

  7. VoltDB介绍——本质:数据保存在内存,充分利用CPU,单线程去锁,底层数据结构未知

    转自:http://blog.csdn.net/ransom0512/article/details/50440316 简介 VoltDB数据库是一个分布式,可扩展,shared-nothing的内存 ...

  8. lucene索引文件格式

    转自:http://blog.csdn.net/whuqin 本文介绍下lucene生成的索引有哪些文件组成,每个文件包含了什么信息.基于Lucene 4.10.0. 数据结构 索引(index)包含 ...

  9. Git工作流指南:集中式工作流

    转载:http://blog.jobbole.com/76847/ 本文由 伯乐在线 - 李鼎 翻译.未经许可,禁止转载!英文出处:atlassian.欢迎加入翻译组. 转到分布式版本控制系统看起来像 ...

  10. 如何实现ASP.NET中网站访问量的统计

    如何实现ASP.NET中网站访问量的统计 2009-07-30 15:50 佚名 网翼教程网 字号:T | T 本文介绍了如何在asp.net中进行网站访问量的统计. AD:51CTO 网+ 第十二期 ...