移动端——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)"/>

之前的meta篇中也说了

这两组标签是移动端IOS系统的专属标签。

意思是开启了网页webapp功能，点击浏览器下面的工具按钮中的保存至主屏幕功能，会在主屏幕中生成快捷图标，点击该图标就会以webapp的方式浏览网站。开启了保存至主屏幕功能后，相应的会有一些link标签来进行配合使用。

上面代码中的link标签均是配合该功能进行设置的，其中：

（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 -电视类型的设备

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样式。

巴特西

移动端——link标签

最新文章

热门文章