前端制作篇之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共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是 ...
随机推荐
- opcode修改
Smali: if-eqz opcode 38 if-nez opcode 39 SO: CMP R0,#0 00 28 CMP R0,#1 01 28
- mystring c++ 自己的string 封装
1 /************************************************************************* > File Name: mystrin ...
- JavaScript（三）---- 控制流程语句
常用的控制流程语句有判断语句.分支语句.循环语句.基本用法都和java中的一致,switch有几点特殊. 1.判断语句 格式: if(判断条件){ 符合条件执行的代 ...
- win10 下使用虚拟机安装ubuntu及其网络配置
通过虚拟机安装ubuntu 我的机器是64位的win10系统,使用的虚拟机VMware workstation 12 pro 安装的是ubuntu 14.04, 网上教程很多,很详细也有有效 win1 ...
- Java谜题心得
1,二进制浮点数的运算是对实际算数的一种近似运算. 2,IEEE 754浮点算术保留了一个特殊的值用来表示一个不是数字的数量[IEEE 754].这个值就是NaN(“不是一个数字(Not a Numb ...
- 数据恢复软件Extundelete
数据恢复软件Extundelete介绍 一.概述 作为一名运维人员,保证数据的安全是根本职责,所以在维护系统的时候,要慎重和细心,但是有时也难免发生出现数据被误删除的情况,这个时候该如何快速.有效地恢 ...
- UWSGITOP-----监控uwsgi 性能
启动 uwsgi -x etc/bfdds_cookiemapping_conf.xml --stats /tmp/stats.socket 查看 uwsgitop /tmp/stats.socket ...
- Oracle存储过程中如何使用游标
--本存储过程的功能:把test_tbl2中与test_tbl1中ID相同但salary不同的记录中的salary的值更新为test_tbl1中的salary的值--创建存储过程create or r ...
- JS传递到后台中文 出现乱码问题
js 异步传递中文字符,后台接收出现乱码问题 function showFirSelect(a){ var b = encodeURI(a); var secUrl = "<%=bas ...
- 子序列和问题 acm
题目描述 给定一个序列 {a1,a2,…,an},定义从a[l]到a[r]的连续子序列的和为sum[l,r],即sum[l,r]=sigma{ai},l<=i<=r.(1<=l< ...