移动对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"/ > //作者姓名
转载于:https://www.cnblogs.com/sensualgirl/archive/2013/05/22/3092888.html
移动对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 ...
最新文章
- SAP RETAIL 商品主数据里影响自动补货结果的几个参数 I
- Fast digital I/O for Arduino
- 【Qt】QModbusRtuSerialMaster类
- module_param 用于动态开启/关闭 驱动打印信息
- 介绍一下mysql的存储过程和搜索引擎_MySQL基础(四)—存储过程和存储引擎
- MySQL基础操作汇总二
- android settheme不起作用,android-主题,样式和别名嵌套不起作用
- android 物业管理系统,基于Android的物业管理系统
- 微软服务器补丁管理软件,微软IT的补丁管理-MicrosoftDownloadCenter.PDF
- 基本社会里模型的源码分析
- 鼠标计算机英语怎么说,鼠标英语
- Seckill秒杀系统高并发优化
- CTFshou wed文件上传
- Xcode Accounts连接到Apple ID 服务器时出错
- gfsdgfsragf
- mysql2005编辑器用法,文本编辑器 - Visual Studio的隐藏功能(2005-2010)?
- iOS开发关于“发送原图”功能问题的记录
- informix数据库unload导出数据Load导入数据
- mac下使用realpath命令
- 苹果鼠标怎么充电_“智能”还是“多功能”?米物智能鼠标垫测评
热门文章
- 一文了解OOM及解决方案,成功入职字节跳动
- 微调Faster-R-CNN-InceptionV2完成高准确率安全帽检测任务
- python批量读取根目录下文件内容并保存
- Keras【Deep Learning With Python】实现多元线性回归
- 全卷积神经网路【U-net项目实战】U-Net网络练习题: Kaggle - 2018 Data Science Bowl
- mysql mydumper_mysql数据库备份之mydumper
- idea server日志乱码_IDEA高级玩法:集成JIRA、UML类图插件、SSH、FTP、Database管理
- 不同类的方法 事务问题_深入理解 Spring 事务原理
- mysql按升序创建索引_MySQL8新特性:降序索引详解
- ecm工作原理 usb_USB中CDC-ECM的了解和配置