移动端Web Meta标签

原文  http://blog.segmentfault.com/jianjian_532633/1190000000654839 添加到推刊

在介绍移动端特有 meta 标签之前，先简单说一下 HTML meta 标签的一些知识。

meta 标签包含了 HTTP 标题信息 (http-equiv) 和 页面描述信息 (name)。

  • http-equiv:

    该枚举的属性定义，可以改变服务器和用户代理行为的编译。编译的值取content 里的内容。简单来说即可以模拟 HTTP 协议响应头。

    最常见的大概属于 Content-Type 了，设置编码类型。如

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    H5中可以简化为

    <meta charset="utf-8">

    http-equiv常见还有其它如下等（合理使用可增加 SEO 收录）。

    • Content-Language : 设置网页语言
    • Refresh : 指定时间刷新页面
    • set-cookie : 设定页面 cookie 过期时间
    • last-modified : 页面最后生成时间
    • expires : 设置 cache 过期时间
    • cache-control : 设置文档的缓存机制
    • ...
  • name: 该属性定义了文档级元数据的名称。用于对应网页内容，便于搜索引擎查找分类，如 keywords, description; 也可以使用浏览器厂商自定义的 meta， 如 viewport；

移动端特有属性

viewport

可视区域的定义，如屏幕缩放等。告诉浏览器如何规范的渲染网页。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

上一章节中已经详细讲解过了，这边就不再重复了。

format-detection

对电话号码的识别

<meta name="format-detection" content="telphone=no" />

IOS私有属性

apple-mobile-web-app-capable

启用 webapp 模式, 会隐藏工具栏和菜单栏，和其它配合使用。

<meta name="apple-mobile-web-app-capable" content="yes" />

apple-mobile-web-app-status-bar-style

在webapp模式下，改变顶部状态条的颜色。

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

default(白色，默认) | black(黑色) | black-translucent(半透明)

注意：若值为“black-translucent”将会占据页面位置，浮在页面上方（会覆盖页面 20px 高度， Retina 屏幕为 40px ）。

webapp对应的Link标签

apple-touch-icon

在webapp下，指定放置主屏幕上 icon 文件路径;

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

默认 iphone 大小为 60px, ipad 为 76px, retina 屏乘2；

如没有一致尺寸的图标，会优先选择比推荐尺寸大，但是最接近推荐尺寸的图标。

ios7以前系统默认会对图标添加特效（圆角及高光），如果不希望系统添加特效，则可以用apple-touch-icon-precomposed.png代替apple-touch-icon.png

apple-touch-startup-image

在 webapp 下，设置启动时候的界面;

<link rel="apple-touch-startup-image" href="/startup.png" />

不支持 size 属性，可以使用 media query 来控制。iphone 和 touch 上，图片大小必须是 230*480 px,只支持竖屏;

其它meta

<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

参见w3cplus

末尾总结

所以，一般新建页面的时候，可以采用如下结构， 再依据自己的实际需要添加所需即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection"content="telephone=no" />
<title>Demo</title>
</head>
<body>
<!-- code here -->
</body>
</html>

更多评论

评论加载失败，重新加载

WebApp之Meta标签

<meta name="apple-touch-fullscreen" content="yes">

"添加到主屏幕“后，全屏显示

<meta name="apple-mobile-web-app-capable" content="yes" />

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

<meta name=”apple-mobile-web-app-status-bar-style” content=black” /> 默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。注意： 若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。

在iOS中有两个meta值，apple-mobile-web-app-capable和apple-mobile-web-app-status-bar-style，这两个会让网页内容以应用程序风格显示，并使状态栏透明。<meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<link rel="apple-touch-icon-precomposed" href="http://spion.blog.163.com/blog/iphone_milanoo.png" />说明： 这个link就是设置web app的放置主屏幕上icon文件路径。图片尺寸可以设定为57*57（px）或者Retina可以定为114*114（px），ipad尺寸为72*72（px）

<meta content="telephone=no" name="format-detection" /><meta content="email=no" name="format-detection" />//将不识别邮箱告诉设备忽略将页面中的数字识别为电话号码 

iOS用rel="apple-touch-icon",android 用rel="apple-touch-icon-precomposed"。这样就能在用户把网页存为书签时，在手机HOME界面创建应用程序样式的图标。

<link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png" />
<link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png" />

				


				
时间： 2024-10-13 22:44:27 

		


		


	

	
	

		


		
移动端Web Meta标签的相关文章


								

		

			

                移动端APP  meta标签
			

		

		

									

				<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport" /> <meta name="apple-mobile-web-app-capable" content="yes"			

		

	

				

		

			

                移动端的meta标签
			

		

		

									

				写在前面的话: 要是做的网页同样为移动端所用,那么就要加上以下 标签: <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> ok ~			

		

	

				

		

			

                移动端的 meta 标签
			

		

		

									

				viewport <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> content参数: width viewport 宽			

		

	

				

		

			

                移动端默认meta标签
			

		

		

									

				<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-st			

		

	

				

		

			

                移动端web开发初探之Vuejs的简单实战
			

		

		

									

				这段时间在做的东西,是北邮人论坛APP的注册页.这个注册页是内嵌的网页,因为打算安卓和IOS平台同时使用.因此实际上就是在做移动端的web开发了. 在这过程中遇到了不少有意思的东西. DEMO的github地址在这里 内容提要: meta标签 Vuejs的简单实战 CSS移动端全屏背景 CSS移动端动画初探 meta标签 这点与在PC端写前端有着很大的区别,移动端的meta标签简直多.我就说说我所用到的标签. <!-- 1.如果支持Google Chrome Frame:GCF,则使用GCF渲染			

		

	

				

		

			

                手机H5移动端WEB资源整合之meta标签
			

		

		

									

				一.相关网站使用meta的实例 youku首页的Meta设置: <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="title" content="优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频" /> <meta n			

		

	

				

		

			

                移动web前端之meta标签
			

		

		

									

				最近这段时间忙着做web移动端,东西跟pc端还是有区别的.这个月也学到了不少东西,太多了就从头开始,先总结meta标签吧. 主要标签内容和注释如下: <meta charset="UTF-8"> <!--html5 已经简化 设置charset字符编码的格式--> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/> <!--使用			

		

	

				

		

			

                移动端web页面开发常用的头部标签设置
			

		

		

									

				在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> initial-scale属性控制页面最初加载时的缩放等级.maximum-scale.m			

		

	

				

		

			

                移动端meta标签
			

		

		

									

				一.天猫 <title>天猫触屏版</title> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, use