移动对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"/ > //作者姓名
移动对meta的定义(转)相关推荐
- 移动对meta的定义
以下是meta每个属性详解 尤其要注意的是content里多个属性的设置一定要用分号+空格来隔开,如果不规范将不会起作用. 一.<meta http-equiv="Content-Ty ...
- 移动平台对 meta 标签的定义
下面介绍一些有关标记的例子及解释. 一.meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name). 1.http-equiv 属性的 Content-Type 值 ...
- simple_html_dom meta,HTML DOM Meta content 属性
HTML DOM Meta content 属性 Meta 对象 定义和用法 content 属性可设置或者返回 meta 元素 content 属性值. content 属性指定了 meta 信息的 ...
- html页面头部里的meta
作者:zccst html中的http-equiv属性应用详解 一.简介 http-equiv 属性 -- HTTP协议的响应头报文 此属性出现在meta标签中 此属性用于代替name,HTTP服务器 ...
- SEO | 重新认识一下Meta标签
很多人忽视了HTML标签META的强大功效,一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性,有兴趣吗,谁我来重新认识一下META标签吧! META标签是HTML语言HEAD区的一个辅 ...
- html之文档的头部和元数据定义(上)
什么叫元数据? 要理解这个问题,首先要知道"元"是什么.元(meta),一般被我们翻译成"关于--的--". 元数据(meta data)--"dat ...
- W3C中meta标签详解
2019独角兽企业重金招聘Python工程师标准>>> meta是html语言head区的一个辅助性标签.几乎所有的网页里,我们可以看到类似下面这段的html代码: <meta ...
- django model对象修改_Django之Model的Meta选项详解
Django默认生成的表名: 应用名小写_模型类名小写 可以通过在模型类中定义Meta类来修改表名: class Department(models.Model):""" ...
- Django的模型类Meta
一怼:什么是海盗精神?就是做自己喜欢做的事,哪怕它反抗了君主,我生而为狼,也像狼一样死去.这就是海盗精神. 在模型类中定义Meta类来修改表名: class Department(models.Mod ...
最新文章
- oracle开发常用,oracle开发常用关键字
- python.day01笔记
- [html] 使用递归时应该注意哪些问题?
- django的orm指定字段名,表名 verbose_name_plural
- java 漏洞挖掘_Java反序列化漏洞的挖掘、攻击与防御
- Java 生态圈知识汇总
- 可能是史上最详细-Faster RCNN Pytorch 复现全纪录
- 【GDB调试学习笔记】Makefile多级目录生成可执行文件
- 【计算机基础】思维导图
- 数据分析概念与职业操守
- macbook双系统怎么装mysql_mac装win10双系统的方法_如何安装macos苹果和win10双系统...
- 【关于QT QMediaPlayer 打包后不能播放声音(plugins文件问题引起)】
- Java实现 LeetCode 309 最佳买卖股票时机含冷冻期
- 关于论青少年尽早学少儿编程之说
- POJ-2001-Shortest Prefixes
- 信息系统项目管理师教程(第3版)- 结构化综合布线系统的组成特点
- 掘金量化如何精准选股?
- 国内外比较出名的做MySQL的公司以及原因
- H5页面在iPhoneX适配
- 创建自己的手册 um命令
热门文章
- 登和平视显示无法连接服务器,提醒信息的推送方法和装置、平视显示器HUD及服务器...
- java同时关闭两个窗口_在一个窗口中同时关闭多个窗口的问题(Swing中事件多点传送的问题) | 学步园...
- java 异常抛出空指针异常_java.lang.NullPointerException 抛出空指针异常
- Java不是true值不变_Java语言中String a=a;String b=a; 为什么 a==b 值为 true?
- mysql分页查询关键_MySQL优化教程之超大分页查询
- java udp简单聊天程序_Java基于UDP协议实现简单的聊天室程序
- maven deploy上传私服出错
- 蓝桥杯 历届试题 带分数
- codeforces Restore Cube(暴力枚举)
- TVM:交叉编译和RPC