欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

移动前端标签详解

先上代码:

<!--HTML5 doctype-->

xxx
<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标签表示的意思是是否启动webapp功能。说通俗一点。就是当点击网页添加至主屏幕功能时,会在主屏幕上生成一个图标。点击该图标会进入webapp功能。就是模拟本地应用的模式来浏览web页面。生成的图标可以自定义,启动webapp时的开始时的图片也可以定义。这个是link标签的作用,我会在介绍link标签时,单独进行说明。

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

 

————————————————

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)

//告诉设备忽略将页面中的数字识别为电话号码

<link rel=”apple-touch-startup-image” href=”startup.png” /> // 设置开始页面图片
<link rel=”apple-touch-icon” href=”iphon_tetris_icon.png”/> // 在设置书签的时候可以显示好看的图标
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">    // 肖像模式样式      
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"   // 风景模式样式
 
//竖屏时使用的样式
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>
 
//横屏时使用的样式
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style>  

更多

本文固定链接: http://shanmao.me/webapp/yi-dong-qian-duan-zhi-meta-biao-qian-xiang-jie | 山猫的博客

该日志由 admin 于2013年02月25日发表在 移动前端 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 移动前端标签详解 | 山猫的博客
关键字: ,