移动端常用meta标签汇总

meta标签常用字段

属性 值 描述

charset (HTML5) character_set 定义文档的字符编码。

content text 定义与 http-equiv 或 name 属性相关的元信息。

http-equiv content-type、default-style、refresh 把 content 属性关联到 HTTP 头部。

name application-name、author、description、generator、keywords 把 content 属性关联到一个名称。

scheme format/URI HTML5不支持。 定义用于翻译 content 属性值的格式。


1、移动端页面设置视口宽度等于设备宽度,并禁止缩放。

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

2、移动端页面设置视口宽度等于定宽(如640px),并禁止缩放,常用于微信浏览器页面。

<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

3、禁止将页面中的数字识别为电话号码

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

4、忽略对邮箱地址的识别

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

5、当网站添加到主屏幕快速启动方式,伪装webapp,可隐藏工具栏/菜单栏/地址栏,仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后,safari上已看不到效果 -->

6、添加到主屏幕后,全屏显示

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

7、设置ios的safari浏览器顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->

8、添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题">

9、添加智能 App 广告条 Smart App Banner

告诉浏览器这个网站对应的app,并在页面上显示下载banner。

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

10、其他meta

<!-- 针对手持设备优化,主要是针对一些老的不识别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">


确认 取消
1条评论