前端制作篇之meta标签篇
移动端前端制作有些地方不同于互联网，这篇主要讨论的是meta标签。meta标签位于之间。是主要辅助HTML结构层的。meta标签不管在互联网前端还是在移动端都起了很重要的作用。这里只讨论移动端。
附上代码进行说明：
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>xxx</title>
<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（灰色半透明）。这个主要是根据实际的页面设计的主体色为搭配来进行设置。
<title>OPPMS</title>
<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=0">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<link href="favicon.ico" rel="bookmark" type="image/x-icon"/>
<link href="favicon.ico" rel="icon" type="image/x-icon"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<link rel="apple-touch-icon" href="app-icon.png"/>
前端制作篇之meta标签篇的更多相关文章
- 移动前端工作的那些事---前端制作篇之meta标签篇
移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于head标签之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移 ...
- web前端-《手机移动端WEB资源整合》——meta标签篇
前端网页meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向 ...
- 前端手札－－meta标记篇
通用类: 声明编码 <meta charset='utf-8' /> SEO页面关键词 <meta name="keywords" content="y ...
- 移动前端不得不了解的Meta标签
http://ghmagical.com/article/page/id/PSeJR0rPd34k
- HTML meta标签总结与属性使用介绍
之前学习前端中,对meta标签的了解仅仅只是这一句. <meta charset="UTF-8"> 但是打开任意的网站,其head标签内都有一列的meta标签.比如我博 ...
- html meta标签使用总结（转）
之前学习前端中,对meta标签的了解仅仅只是这一句. <meta charset="UTF-8"> 但是打开任意的网站,其head标签内都有一列的meta标签.比如我博 ...
- BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...
- BAT及各大互联网公司前端笔试面试题--Html,Css篇
注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5931347.html )作者:wangwen896 整理分享出来希望更多的前端er共同进步吧,不仅适用 ...
- (转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
BAT及各大互联网公司2014前端笔试面试题--Html,Css篇 很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是 ...
随机推荐
- WiresShark 一站式学习
按照国际惯例,从最基本的说起. 抓取报文: 下载和安装好Wireshark之后,启动Wireshark并且在接口列表中选择接口名,然后开始在此接口上抓包.例如,如果想要在无线网络上抓取流量,点击无线接 ...
- filters
http://www.cloudera.com/content/cloudera/en/documentation/core/latest/topics/admin_hbase_filtering.h ...
- 操，escape sequence的输入方法我以前找过一次，这次又忘了，又找了一次，记下来，
所有的手册和回答都没有说,都是用 echo -e '\e[22;22m,如果不愿意使用echo -e,也可以 输入CvC[[22:22m 不要再忘记了.
- zf-表单填写以及相关业务流程
这里是表单设置的地方 这是字段信息,如果设置了共享申请人名称的话 那么登记办件时,输入的申请人信息,会自动写入到这个字段中 还有这种,没设置共享的,那么就是申请后,自己输入信息即可 现在我们去申请办件 ...
- 我也谈 AngularJS 怎么使用Directive, Service, Controller
原文地址:http://sunqianxiang.github.io/angularjs-zen-yao-shi-yong-directiveservicecontroller.html 其转自大漠穷 ...
- Spring+Struts集成(第二种方案)
在上一篇文章中我们了解到了第一种Spring跟Struts集成的方案,但此集成方案的不足是WEB层中知道Spring的相关内容,因为需要去主动的查找对象:BeanFactory.方案二便是通过依赖注入 ...
- Android开源项目收集
软件名:gaeproxy软件作用:Android手机配置GoAgentFQ.项目地址:https://github.com/madeye/gaeproxy.git 软件名:ProxyDroid软件作用 ...
- document.createElement方法的使用
我们在使用createElemen方法t创建一个元素节点的时候,似乎在IE下面怎么写都可以,但切换到FF等其它浏览器却总是会报错. 比如我们要创建一个input元素,那么在IE下,我们可以有多种写法: ...
- 关于nodejs的require顺序
--------------------------------------- check /home/somebody/node_modules/othermodule check /home/so ...
- linux下用script和scriptreplay对命令行操作录像
以前查看自己的历史操作,都是history里来查看的,只有命令,有时候系统返回的什么也没有,看了script可以对自己的操作进行录像,于是自己也做个. 要记录操作之前输入命令: [root@wulao ...