移动端Web Meta标签

2023-07-19 22:59:28

原文 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的作用就是删除默认的苹果工具栏和菜单栏。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界面创建应用程序样式的图标。

码农公寓