html 移动端——meta标签和link标签

一、meta标签

meta标签主要辅助HTML结构层的。meta标签不管在互联网前端还是在移动端都起了很重要的作用。

<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

这是一个HTML5为语言标准的说明文档。

第一组meta标签，比较常见。它表明的意思是它的内容是html文档，且网页编码采用的是utf-8编码。utf-8编码主要针对是简体中文和英文。正确的编码定义很有必要。否则会导致网页上的文字变成乱码。

第二组meta标签就是移动端特属的标签了。意思是它是一个视图窗口，其视图窗口内容的宽度等于移动端设备的默认宽度；inital-scale表示的初始的缩放比例.一般设置为1.0倍；maximum-scale=1.0表示的允许用户缩放的最大比例；user-scalable=no表示是否支持用户手动进行缩放。

第三组和第四组meta标签都是针对IOS系统的专属标签。

第三组meta apple-mobile-web-app-capable 标签表示的意思是是否启动webapp功能，就是当点击网页添加至主屏幕功能时，会在主屏幕上生成一个图标。点击该图标会进入webapp功能，就是模拟本地应用的模式来浏览web页面。生成的图标可以自定义，启动webapp时的开始时的图片也可以定义，这个是link标签的作用，在介绍link标签时，单独进行说明。

第四组meta标签表示的是当启动webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。这个主要是根据实际的页面设计的主体色搭配来进行设置。




二、link标签

meta标签中提到了部分功能要结合link标签进行使用，link标签主要是存放CSS文件的地方，同时还有一些专属的移动端设置


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

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

<meta http-equiv='Cache-Control' content='no-store' />

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

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

<link rel="apple-touch-startup-image" href="images/start.jpg"/>

<link rel="apple-touch-icon" href="images/iphone.png" />

<link rel="apple-touch-icon" sizes="72x72" href="images/ipad.png" />

<link rel="apple-touch-icon" sizes="114x114" href="images/iphone4.png" />

<link rel="stylesheet" type="text/css" href="print.css"  media="only handheld and (max-width: 480px)"/>

其中：

（1）<link rel="apple-touch-startup-image" href="images/start.jpg"/>
表示在点击主屏幕中生成的快捷图标后，网站在加载过程中，显示的图片。这个功能用户体验很好。避免加载时的白屏，减少用户等待网站加载过程的烦闷。缺陷是目前只支持竖屏浏览模式，横屏浏览时不支持。

（2）<link rel="apple-touch-icon" href="images/iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/iphone4.png" />
这三项是针对不同版本自定义的不同的主屏幕图标。当然不定义也可以，点击主屏幕时，会以当前屏幕截图作为图标的。而其中apple-touch-icon表示的该图标是自动加高光的图标按钮。与之相对应的是apple-touch-icon-precomposed按原设计不加高光效果的图标。可根据实际项目情况，选择使用。

（3）<link rel="stylesheet" type="text/css" href="print.css"  media="only handheld and (max-width: 480px)"/>

此处link标签指明了外部的样式链接，但是有条件的。这个条件就是使用media来进行设置的。它表明的意思是说仅应用在手持设备上，且最大屏幕宽度为480px。

 

然后，这里的media（媒体查询）也是CSS3的一部分：

media_query: [only | not]? <media_type> [ and <expression> ]
* expression: ( <media_feature> [: <value>]? )
常用设备类型：
all-所有设备 
screen-电脑显示器
handheld-便携设备
print-打印用纸或者打印预览图
projection-各种摄影设备
tv -电视类型的设备

常用设备特性：
width | min-width | max-width |          浏览器窗口的宽度
height | min-height | max-height |        浏览器窗口的高度
device-width | min-device-width | max-device-width |          设备屏幕分辨率的宽度值
device-height | min-device-height | max-device-height |          设备屏幕分辨率的高度值

orientation 有两个值 portrait|landscape。      浏览器窗口的方向是纵向还是横向。当窗口的高度大于等于宽度时，是portrait，否则为landscape。

1、查询指定媒体依赖CSS来负载的HTML
<link href='css/480.css' media='only screen and (max-width: 480px)' rel='stylesheet' type='text/css'>

2、查询指定媒体直接在CSS本身
@media only screen and (max-width: 768px) { }
@media only screen and (min-width: 480px) { }

@media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 600px)

3、Orientation 依赖CSS
@media (orientation: portrait) { }
@media (orientation: landscape) { }

4、Orientation 依赖CSS
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

总结来说，media标签的作用就是在不使用javascript的情况下，通过设定不同的条件来有选择的选用相应的css样式。