之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发。

其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签中应该加什么属性时,我愣了一下,因为原来我写这方面代码时根本没有注意过这个问题,我以为在*.html文件里加上了<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">,就万事大吉了。没想到,里面有很多弯弯呢;出于好奇,我查了些关于移动APP中meta属性的资料,在这里跟大家分享下:

以下是meta每个属性详解
 
尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开,如果不规范将不会起作用。
 
一、<meta http-equiv="Content-Type" content="text/html; charset=utf-8">   //编码
 
META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的标记和 标题 <<标记之间,它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题,或者是定义
 
用户浏览器上的cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级,等等。
 
  详细介绍
 
  下面介绍一些有关 标记的例子及解释。
 
  META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME)。
 
  ★HTTP-EQUIV
 
  HTTP-EQUIV类似于HTTP的头部协议,它回应给浏览器一些有用的信息,以帮助正确和精确地显示网页内容。常用的HTTP-EQUIV类型有:
 
  1、Content-Type和Content-Language (显示字符集的设定)转自环 球 网校edu24ol.com转自环 球 网校edu24ol.com转自环 球 网校edu24ol.com
 
  说明:设定页面使用的字符集,用以说明主页制作所使用的文字已经语言,浏览器会根据此来调用相应的字符集显示page内容。
 
  用法:<Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312">
 
  <Meta http-equiv="Content-Language" Content="zh-CN">
 
  注意: 该META标签定义了HTML页面所使用的字符集为GB2132,就是国标汉字码。如果将其中的"charset=GB2312"替换成"BIG5",则该页面所用的字符集就是繁体中文Big5码。当你
 
浏览一些国外的站点时,IE浏览器会提示你要正确显示该页面需要下载xx语支持。这个功能就是通过读取HTML页面META标签的Content-Type属性而得知需要使用哪种字符集显示该页面的。如
 
果系统里没有装相应的字符集,则IE就提示下载。其他的语言也对应不同的charset,比如日文的字符集是"iso-2022-jp ",韩文的是"ks_c_5601"。
 
  Content-Type的Content还可以是:text/xml等文档类型;
 
  Charset选项:ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc、Koi8-2、us-ascii, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp,
 
euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1,x-cns11643-2等字符集;Content-Language的Content还可以是:EN、FR等语言代码。
 
二、<meta id="viewport" name="viewport" content="width=320; initial-scale=1.0;maximum-scale=1.0; user-scalable=no;"/>//屏幕的缩放
 
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)
 
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" >
 
第一个meta标签表示:
 
    强制让文档与设备的宽度保持1:1;
 
    文档最大的宽度比列是1.0(initial-scale初始刻度值和maximum-scale最大刻度值);
 
 
    user-scalable定义是否可缩放(0为不缩放),使页面固定设备上面的大小。
 
(注意:实际测试中发现,HTC G7自身系统浏览器不支持这一条规则,能够对页面进行放大,一旦放大响应的box也随之放大,导致俄页面出现错乱问题,解决方法:定义页面的最小宽度
 
 min-width,body{min-width: 300px;})
 
三、<meta name="apple-mobile-web-app-capable" content="yes" />  // 离线应用的另一个技巧   
 
<meta name="apple-mobile-web-app-status-bar-style" content="black" />  // 隐藏状态栏\
 
说明:网站开启对web app程序的支持。 
 
这里要详细的介绍一下ios设备对这两个meta的功能作用(外界通称该应用为"离线app",但从字面意思上面会有误解,以为只能脱离网络,所以在这里我还是用web app描述。):
 
该meta可以看出内容为"苹果设备web 应用程序xx",就是说该meta是专门定义web 应用的.
 
说明:
 
    在web app应用下状态条(屏幕顶部条)的颜色;
 
    默认值为default(白色),可以定为black(黑色)和black-translucent(灰色半透明)。
 
注意:
 
    若值为"black-translucent"将会占据页面px位置,浮在页面上方(会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px)。
 
纠正:之前查阅了一些资料,说apple-mobile-web-app-status-bar-style属性为隐藏状态栏,其实这是一个误解,在这里为大家纠正一下这个问题。
 
苹果web app其他设置:
 
当然,配合web app的icon 和 启动界面需要额外的两端代码进行设定,如下所示:
 
<link rel="apple-touch-icon-precomposed" href="iphone_milanoo.png" />
 
说明: 这个link就是设置web app的放置主屏幕上icon文件路径。
 
使用:
 
    该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
 
    图片尺寸可以设定为57*57(px)或者Retina可以定为114*114(px),ipad尺寸为72*72(px)
 
<link rel="apple-touch-startup-image" href="milanoo_startup.png" />
 
说明:
 
    这个link就是设置启动时候的界面,放置的路劲和上面类似。
 
使用:
 
    该路径需要注意的就是放到将网站的文档根目录下但不是服务器的文档的根目录。
 
    官方规定启动界面的尺寸必须为 320*640(px),原本以为Retina屏幕可以支持双倍,但是不支持,图片显示不出来。
 
       
四、<meta content="black" name="apple-mobile-web-app-status-bar-style" /> //指定的iphone中safari顶端的状态条的样式 
   
<meta content="telephone=no" name="format-detection" />  <meta content="email=no" name="format-detection" />//将不识别邮箱
 
告诉设备忽略将页面中的数字识别为电话号码  
 
 使设备浏览网页时对数字不启用电话功能(不同设备解释不同,itouch点击数字为存入联系人,iphone为拨打电话),忽略将页面中的数字识别为电话号码。
 
若需要启用电话功能将telephone=yes即可,具体调用格式可以这样书写代码<a href="13888888888″>Call Me</a>,若在页面上面有google maps, iTunes和youtube的链接会在ios设备上打
开相应的程序组件。
 
<meta name="Author" contect="Mr.He"/ > //作者姓名

我刚知道的WAP app中meta的属性的更多相关文章

  1. 我刚知道的WAP app中meta的属性(转载)

    之前我一直做的都是WEB前端开发,来北京以后面试了一个移动前端开发,WAP前端开发. 其实在原来公司的时候也做过这方面的开发,可面试的时候面试官问我,要想强制让文档与设备的宽度保持1:1,mate标签 ...

  2. 你应该知道的CSS2.0中最常用的18条技巧

    一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.  具体内容请浏览:CSS常用缩写语法 二.明确定义单位,除非值为0. 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中 ...

  3. 刚知道的android属性

    在EditText中当设置的高度是wrap_parent,但是随着我们输入的越来越多,编辑框会被拉伸的很丑,所以就用了maxLines属性,设置maxLines="2"说明最多输入 ...

  4. 2018-11-20-UWP-开发中,需要知道的1000个问题

    title author date CreateTime categories UWP 开发中,需要知道的1000个问题 lindexi 2018-11-20 09:28:53 +0800 2018- ...

  5. 很少有人知道的c++中的try块函数

    c++有一些在现实世界中很少看到的结构.这些结构有着自己的用法,但是要特别小心保守的予以运用.就像是网站 The Old New Thing首页标题上面的说的那样: “代码通常被读的次数原因超过了被写 ...

  6. 你应该知道的2016年有关App开发的技术创新

    上一篇简述了2016年有关App产品的年中总结,这篇开始历数有关App开发的技术创新!无论你是创业者,还是程序员,无论你是否懂编程.写代码,利用APICloud平台数据撰写的年中总结,集合了移动应用创 ...

  7. 微信小程序开发日记——高仿知乎日报(中)

    本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教 ...

  8. 关于Solr搜索标点与符号的中文分词你必须知道的(mmseg源码改造)

    关于Solr搜索标点与符号的中文分词你必须知道的(mmseg源码改造) 摘要:在中文搜索中的标点.符号往往也是有语义的,比如我们要搜索“C++”或是“C#”,我们不希望搜索出来的全是“C”吧?那样对程 ...

  9. Web App中的Flexbox应用

    虽然语法可能比较混杂,但 Flexbox 还是名不虚传的.它创造的是可伸缩的.有弹性的.可改变视觉顺序的智能盒子.它提供了简单的CSS布局方案范例让容器总是处于垂直水平居中的位置.使用盒模型来工作是非 ...

随机推荐

  1. Windows快速删除文件脚本

    1.新建一个txt文件 2.将DEL /F /A /Q \\?\%1RD /S /Q \\?\%1这段代码放在新建好的txt文件中 3.将txt文件的后缀名改为.bat 4.将这个文件放在需要删除的文 ...

  2. 由一个RABBITMQ监听器死循环引出的SPRING中BEAN和MAPPER接口的注入问题

    1 @Slf4j 2 @RestController 3 @Component 4 public class VouchersReceiverController implements Message ...

  3. [stat.simulation] Hasting-Metropolis Algorithm

    问题背景:我们有一些观测数据X,这些数据假设是取值为1,...,m:我们还知道每个数据观测到的频数为: 但是我们现在无法计算B的大小.(这是一个假设,毕竟计算一串数字的和不是难事) 问题: 我们需要通 ...

  4. eclipse android sdk content loader一直显示0%的问题解决

    今天上班启动eclipse,发现eclipse 一直卡在android sdk content loader的地方,一直显示为0%.百度后发现很多都是一下解决方法:  关闭Eclipse,删掉Ecli ...

  5. word使用技巧-批量删除图片技巧

    通过查找替换方法:ctrl+h,查找输入^g,替换输入空,然后替换即可. 今天看到一同事写的文档,发现里面很多word基础功能都不会用,比如同一级的标题居然有好几个样式,并且会级别搞错:列表里的数字居 ...

  6. MVC学习网站

    http://www.cnblogs.com/artech/archive/2012/04/10/how-mvc-works.html

  7. LeetCode----Tree

    Path Sum II 思路:回溯 public List<List<Integer>> pathSum(TreeNode root, int sum) { List<L ...

  8. Oracle索引碎片检查及定期重建常用表的索引

    背景说明: 今天查阅书籍时,偶然间发现“在对某个索引行执行删除操作时,只是为该行增加了一个删除标记,这个索引行并不会释放它的存储空间,Insert产生的新的索引行也不能被插入到该位置.索引列的修改过程 ...

  9. Microsoft Win32 to Microsoft .NET Framework API Map

    Microsoft Win32 to Microsoft .NET Framework API Map .NET Development (General) Technical Articles   ...

  10. javascript介绍

    1.javascript的简介 1.1javascript的特点 1.安全性(不允许方问本地硬盘),它可以做的是信息的动态交互. 2.跨平台.(只要是可以解释js的浏览器都可以执行,与平台无关) 1. ...