移动端前端制作有些地方不同于互联网，这篇主要讨论的是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标签篇的更多相关文章

  1. 移动前端工作的那些事---前端制作篇之meta标签篇

    移动端前端制作有些地方不同于互联网,这篇主要讨论的是meta标签.meta标签位于head标签之间.是主要辅助HTML结构层的.meta标签不管在互联网前端还是在移动端都起了很重要的作用.这里只讨论移 ...

  2. web前端-《手机移动端WEB资源整合》——meta标签篇

    前端网页meta元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词.meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向 ...

  3. 前端手札－－meta标记篇

    通用类: 声明编码 <meta charset='utf-8' /> SEO页面关键词 <meta name="keywords" content="y ...

  4. 移动前端不得不了解的Meta标签

    http://ghmagical.com/article/page/id/PSeJR0rPd34k

  5. HTML meta标签总结与属性使用介绍

    之前学习前端中,对meta标签的了解仅仅只是这一句. <meta charset="UTF-8"> 但是打开任意的网站,其head标签内都有一列的meta标签.比如我博 ...

  6. html meta标签使用总结（转）

    之前学习前端中,对meta标签的了解仅仅只是这一句. <meta charset="UTF-8"> 但是打开任意的网站,其head标签内都有一列的meta标签.比如我博 ...

  7. BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...

  8. BAT及各大互联网公司前端笔试面试题--Html,Css篇

    注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5931347.html )作者:wangwen896 整理分享出来希望更多的前端er共同进步吧,不仅适用 ...

  9. (转)BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    BAT及各大互联网公司2014前端笔试面试题--Html,Css篇   很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是 ...

随机推荐

  1. Ubuntu安装完后设置root密码

    安装完Ubuntu 14.04后默认是没有主动设置root密码的,也就无法进入根用户. 相关阅读: Ubuntu 14.04 下载.安装.配置 整理汇总 页面 http://www.linuxidc. ...

  2. ext3文件系统目录限制问题

    昨晚排查了在KVM的build系统中的一个问题,跟踪到后面发现在一个目录下mkdir创建目录失败.我手动试了一下,提示如下:cannot create directory `/home/master/ ...

  3. 【转】The magic behind array length property

    Developer deals with arrays every day. Being a collection, an important property to query is the num ...

  4. IP 网际协议

    1. IP数据首部长度: 4位版本号 : 4 位,用于标明 IP 版本号,0100 表示 IPv4,0110 表示 IPv6.目前常见的是 IPv4. 4位首部长度: 首部长度是占4位,可表示的最大十 ...

  5. 12C 连接方式和 Oracle Easy Connect Naming method

    1.12C 连接方式 PDB is not an instance, so using SID in the connection string will not work. When the dat ...

  6. 文本属性Attributes 初步

    转载自:http://www.cnblogs.com/qingche/p/3574995.html 1.NSKernAttributeName: @10 调整字句 kerning 字句调整 2.NSF ...

  7. JSON资料整理（转）

    目录 1.什么是json 2.json语法规则 3.json基础结构 4.json基础示例 5.JSON和XML比较 6. .NET操作JSON 原始方式 通用方式 内置方式 契约方式 通过序列化将. ...

  8. ScreenCaptureHtmlUnitDriver.java

    https://github.com/apache/incubator-zeppelin/blob/master/zeppelin-server/src/test/java/com/webautoma ...

  9. 同时运行ecstore1.2与ecstore2.0的解决方案

    解决方法: php.ini中 zend_loader.license_path指向一个目录,该目录下同时包含两个developer.zl文件,一个是1.2,一个是2.0的. 为了避免俩develope ...

  10. bzoj1562【Noi2009】变换序列

    题意:http://www.lydsy.com/JudgeOnline/problem.php?id=1562 给一个序列Di表示min(|i-Ti|,n-|i-Ti|),求一个字典序最小的序列Ti ...