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

附上代码进行说明：

  1. <!DOCTYPE html><!--HTML5 doctype-->
  2. <html>
  3. <head>
  4. <title>xxx</title>
  5. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  7. <meta name="apple-mobile-web-app-capable" content="yes" />
  8. <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（灰色半透明）。这个主要是根据实际的页面设计的主体色为搭配来进行设置。

移动前端工作的那些事---前端制作篇之meta标签篇的更多相关文章

  1. 前端制作篇之meta标签篇

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

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

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

  3. 前端工作面试问题--摘取自github

    前端工作面试问题 本文包含了一些用于考查候选者的前端面试问题.不建议对单个候选者问及每个问题 (那需要好几个小时).只要从列表里挑选一些,就能帮助你考查候选者是否具备所需要的技能. 备注: 这些问题中 ...

  4. 打造高效前端工作环境 - tmux

    打造高效前端工作环境 - tmux 前言  现在前端开发可不容易啊,先打开个VIM,然后再打开个lite-server,一不小心写个ES2015还要打开个gulp来做预编译,如果能把这么多个窗口放在一 ...

  5. 前端工作流程自动化——Grunt/Gulp 自动化

    什么是自动化 先来说说为什么要自动化.凡是要考虑到自动化时,你所做的工作必然是存在很多重复乏味的劳作,很有必要通过程序来完成这些任务.这样一来就可以解放生产力,将更多的精力和时间投入到更多有意义的事情 ...

  6. 前端发展态势 && 前端工作流程个人浅析

    于在未开启cleartype的情况下,一些中文字体在非偶数字号下的显示效果欠佳,所以一般建议使用12.14.16.18.22px等偶数字号.也就 是对某个分辨率选择离它最近的偶数字号.例如:屏幕横向分 ...

  7. 好程序员web前端分享18个用CSS制作出来的东西

    好程序员web前端分享18个用CSS制作出来的东西,与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和 ...

  8. 零基础学到什么程度可以找一份web前端工作？

    能找到一份前端开发工作,首先你起码得是一个合格的初级前端工程师.那么,什么是初级前端工程师?初级前端工程师都会做些什么?这个问题需要分为以下几个方面来说: 一.对应岗位的工作职责初级前端,主要负责产品 ...

  9. 前端工作面试HTML相关问题

    前端工作面试HTML相关问题 Q: doctype(文档类型)的作用是什么? A: 在HTML中 doctype 有两个主要目的. 对文档进行有效性验证: 它告诉用户代理和校验器这个文档是按照什么DT ...

随机推荐

  1. UVa 11134 (区间上的贪心) Fabled Rooks

    这道题真是WA得我心力交瘁,好讨厌的感觉啊! 简直木有写题解的心情了 题意: n×n的棋盘里,放置n个车,使得任意两车不同行且不同列,且第i个车必须放在给定的第i个矩形范围内.输出一种方案,即每个车的 ...

  2. UVa (二分) 11627 Slalom

    题意: 有宽度相同的水平的n个旗门,水平(纵坐标严格递增)滑行的最大速度为Vh(水平速度可以任意调节).然后还有S双滑雪板,每双滑雪板的垂直速度一定. 然后求能通过的滑板鞋的最大速度. 分析: 显然, ...

  3. jstl表达式

    JSTL标签库 1.什么是JSTL JSTL是apache对EL表达式的拓展(也就是说JSTL依赖EL),JSTL是标签语言!JSTL标签使用以来非常方便, 它与JSP动作标签一样,只不过它不是JSP ...

  4. 优雅地使用CodeIgniter 3之Session类库(1)（转）

    相信无数人在使用CI2的Session类库时,遇到各种的坑,各种抱怨,各种不解.在CI中国论坛能搜到大量关于Session类库的提问,说明要想用 好session类库还是得下一番功夫.本文将先从CI2 ...

  5. ORA-10456:cannot open standby database;media recovery session may be in process

    http://neeraj-dba.blogspot.com/2011/10/ora-10456-cannot-open-standby-database.html   Once while star ...

  6. JAVA虚拟机内存分配与回收机制

    Java虚拟机(Java Virtual Machine) 简称JVM Java虚拟机是一个想象中的机器,在实际的计算机上通过软件模拟来实现.Java虚拟机有自己想象中的硬件,如处理器.堆栈.寄存器等 ...

  7. 【转】U-boot分析与移植（1）----bootloader分析

    原文网址:http://blog.csdn.net/jianchi88/article/details/7061089  一.Boot Loader 概念 就是在操作系统内核运行之前运行的一段小程序. ...

  8. mysql添加用户和用户权限

    Mysql添加用户使用可以对mysql数据库用户表有操作权限的用户名登陆mysqlinsert into user(Host,User,Password) values('%','name','pas ...

  9. MySQL与Oracle 差异比较之七其它

    其它 编号 类别 ORACLE MYSQL 注释 1 内连接的更改 1.select a.*, b.*, c.*, d.*  from a, b, c, d where a.id = b.id   a ...

  10. 将数据库中的表注册到K2服务中，并封装为Smart Object

    转:http://www.cnblogs.com/dannyli/archive/2011/08/15/2139550.html K2 blackpearl项目中经常需要将其他数据中的表注册到K2服务 ...