Mobile Devices Support 之meta标签

<!-- Mobile Devices Support @begin -->
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
<meta content="telephone=no, address=no" name="format-detection">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="no-cache" http-equiv="pragma">
<meta content="0" http-equiv="expires">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- Mobile Devices Support @end -->

meta标签name="viewport"含义为手机浏览缩放控制

content值包括:

width - viewport的宽度 、height - viewport的高度

width和height指令分别指定视区的逻辑宽度和高度。他们的值要么是以像素为单位的数字,要么是一个特殊的标记符号。width指令使用device-width标记可以指示视区宽度应为设备的屏幕宽度。类似地height指令使用device-height标记指示视区高度为设备的屏幕高度。

initial-scale - 初始的缩放比例

initial-scale指令用于设置Web页面的初始缩放比例。默认的初始缩放比例值因智能手机浏览器的不同而有所差异。通常情况下设备会在浏览器中呈现出整个Web页面,设为1.0则将显示未经缩放的Web文档。

minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例

maximum-scale和minimum-scale指令用于设置用户对Web页面缩放比例的限制。值的范围为0.25至10.0之间。与initial-scale相同,这些指令的值是应用于视区内容的缩放比例。

user-scalable - 用户是否可以手动缩放

user-scalable指令指定用户是否可以缩放视区,即缩放Web页面的视图。值为yes时允许用户进行缩放,值为no时不允许缩放。

http-equiv="Cache-Control" Cache-Control头域

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。

请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached,响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。

各个消息中的指令含义:
Public指示响应可被任何缓存区缓存
Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效
no-cache指示请求或响应消息不能缓存
no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息。

meta标签name="format-detection"含义为格式检测

format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置:
meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"
也可以连写:meta name="format-detection" content="telephone=no,email=no,adress=no"
下面具体说下每个设置的作用:
一、telephone
你明明写的一串数字没加链接样式,而iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号!想去掉这个拨号链接该如何操作呢?这时我们的meta又该大显神通了,代码如下:
telephone=no就禁止了把数字转化为拨号链接!
telephone=yes就开启了把数字转化为拨号链接,要开启转化功能,这个meta就不用写了,在默认是情况下就是开启!
二、email
告诉设备不识别邮箱,点击之后不自动发送
email=no禁止作为邮箱地址!
email=yes就开启了把文字默认为邮箱地址,这个meta就不用写了,在默认是情况下就是开启!
三、adress
adress=no禁止跳转至地图!
adress=yes就开启了点击地址直接跳转至地图的功能,在默认是情况下就是开启!

meta标签name="apple-mobile-web-app-capable"启用 WebApp 全屏模式

这meta的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

meta标签name="Pragma"浏览器缓存

网页中常常看见有这样的标记,用于清浏览器缓存
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
PS:清除浏览器中的缓存,它和其它几句合起来用,就可以使你再次进入曾经访问过的页面时,ie浏览器必须从服务端下载最新的内容,达到刷新的效果。

meta标签name="apple-mobile-web-app-status-bar-style"

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />
 作用是控制状态栏显示样式
status-bar-style:black

更多meta标签设置,用到随时补充。

时间: 2024-08-02 03:50:15

Mobile Devices Support 之meta标签的相关文章

HTML Meta标签知多少

文章已同步至个人Blog:Benjamin - 专注前端开发和用户体验 一.基本属性 标签常常被用来定义HTML文档的元数据或者HTTP协议的指向,这些元数据常用在SEO.HTML Pages or Apps on Mobile/Handheld Devices,该标签主要包括以下属性: Attribute Description Name Name for the property. Can be anything. Examples include, keywords, descriptio

网站性能之meta标签

meta标签常被html初学者忽略就是作死,但对于一个网站来说,它十分重要. 定义:提供页面有关的元信息.比如针对搜索引擎和更新频度的关键字和描述.简单地说meta标签和搜索引擎打交道,可以优化网站SEO. 格式: head标签内 自闭和标签 浏览器支持:全 属性: content:定义与http-equiz和name有关的元信息 http-equiz:将content关联到http头部 name:将content关联到name上 scheme:用于指定要用来翻译属性值的方案(h5已放弃 cha

最齐全的站点元数据meta标签的含义和使用方法

最齐全的站点元数据meta标签的含义和使用方法 随着HTML5的流行和Web技术的不断演变,Meta标签队伍也越来越壮大,从Windows XP的IE6到现在Windows 7.Windows 8的IE9.IE10.IE11,对Html5的支持越来越好.html meta标签的功能作用也越来越强大. 首先.先说一下最初产生的一些经常使用meta标签. 从Meta标签的定义说起. Meta标签是HTML语言中HEAD区的一个辅助性标签,它位于HTML文档头部的<head>标记 和<titl

移动网页版Meta 标签

viewport 大部分移动浏览器都接受,比如 Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox 最基本的例子,在移动上使站点全屏宽度: <meta name="viewport" content="width=device-width, initial-scale=1.0"/> HandheldFriendly 这个标签和下面介绍的 MobileOptimized 是

[转]手机web HTML头信息解释和viewport meta标签解释

<meta charset="utf-8" /> <link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon" /> <meta name="Generator" content="LIXIPHP (http://lixiphp.com)" /> <met

转载:手机网页制作的认识(有关meta标签)

下面是手机网页的一些认识: 一.<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1"> 网页手机wap2.0网页的head里加入下面这条元标签,在iPhone的浏览器中页面将以原始大小显示,并不允许缩放.  <meta name="viewport" content="width=devic

meta标签详解:源http://blog.csdn.net/kongjiea/article/details/17092413

一.大众机型常用meta标签name的设置 1.name之viewport <meta name="viewport" content=""> 说明:屏幕的缩放 content的几个属性:     width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值,大部分的安卓手机不支持,但是ios支持:     height – viewport 的高度 (范围从 223 到 10

How to Run Node.js with Express on Mobile Devices

We released a JXcore plugin for Apache Cordova recently and in this article I will show how to run a Node express application with Cordova. At the time of writing the jxcore-cordova project on github has two samples prepared for running the express m

移动平台对 META 标签的定义

下面介绍一些有关标记的例子及解释. 一.meta 标签分两大部分:HTTP 标题信息(http-equiv)和页面描述信息(name). 1.http-equiv 属性的 Content-Type 值(显示字符集的设定) 说明:设定页面使用的字符集,用以说明主页制作所使用的文字语言,浏览器会根据此来调用相应的字符集显示 page 内容. 用法: <meta http-equiv="Content-Type" content="text/html; charset=utf