我刚知道的WAP app中meta的属性

时间：2023-02-24 15:08:13

之前我一直做的都是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的属性&lpar;转载&rpar;

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

  2. 你应该知道的CSS2&period;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&plus;&plus;中的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. Codeforces Round &num;FF&lpar;255&rpar; DIV2

    A - DZY Loves Hash 水题,开辟一个数组即可 #include <iostream> #include <vector> #include <algori ...

  2. oracle11G使用DGbroker创建dg

    1.环境: a.主机环境:centos6.5 b.软件环境:oracle 11.2.0.4 c.主机信息: DG1:192.168.100.51(数据库sid:atest) DG2:192.168.1 ...

  3. cursor&colon;pointer

    .cursor_hand{ cursor:pointer; }

  4. activiti自定义流程之Spring整合activiti-modeler5&period;16实例（六）：启动流程

    注:(1)环境搭建:activiti自定义流程之Spring整合activiti-modeler5.16实例(一):环境搭建        (2)创建流程模型:activiti自定义流程之Spring ...

  5. 【 java版坦克大战--事件处理】 键盘控制小球上下左右移动

    上一节已经学习了事件处理,这一节需要完成通过键盘的上下左右键控制小球移动. 然后再通过应用到我们绘制的坦克上. /** * 加深对事件处理机制的理解 * 通过光标的上下左右键,控制小球的左右上下移动. ...

  6. C&num;如何设置session过期时间

    1.操作系统  步骤:开始——〉管理工具——〉Internet信息服务(IIS)管理器——〉网站——〉默认网站——〉  右键“属性”——〉主目录——〉配置——〉选项——〉启用会话状态——〉会话超时(在 ...

  7. 【MS SQL】查看任务执行进度

    原文:[MS SQL]查看任务执行进度 备份或还原数据库时,我一般是用MS SQL工具向导来进行,由于工具向导没有显示任务执行过程的状态, 如果数据库比较大执行时间较长的话,对任务啥时候执行完成比较迷 ...

  8. Just for 面试

    ZOJ题目分类 初学者题: 1001 1037 1048 1049 1051 1067 1115 1151 1201 1205 1216 1240 1241 1242 1251 1292 1331 1 ...

  9. 用for&semi; while&period;&period;&period;do&semi; do&period;&period;&period;while&semi; 写出九九乘法表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. dump命令详解

    1.简介: dump命令用于备份文件系统. dump为备份工具程序,可将目录或整个文件系统备份至指定的设备,或备份成一个大文件. 2.语法: dump [-cnu][-0123456789][-b & ...

相关文章