移动端专用的meta标签设置大全

之前学习前端中，对meta标签的了解仅仅只是这一句。

<meta charset=UTF-8>

但是打开任意的网站，其head标签内都有一列的meta标签。比如我们VeVb武林网网站，但是自己却很不熟悉，于是把meta标签加入了学习计划的最前方。

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

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

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

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

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

所有智能手机浏览器都支持ViewPort <meta>标记的width和user-scalabel指令。但是Opera Mobile不使用user-scalable指令，而是主张用户应始终保留在移动浏览器中缩放Web页面的能力。

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是：window.devicePixelRatio = 物理像素 / dips

如果content的值小于或等于screen width 网站自适应屏幕fit-to-screen将被关闭网站不会随着浏览器拉伸缩放

如果content的值大于screen width;fit-to-screen将开启

2015-07-08

<meta name=viewport content=minimal-ui>

在iOS 7.1的Safari中为meta标签新增minimal-ui属性，让网页在加载时便可隐藏顶部的地址栏与底部的导航栏。

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

是否启动webapp功能 设置为yes 网站就会在满屏模式full-screen mode删除默认的苹果工具栏和菜单栏

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

开启对web app程序的支持

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

iPhone会自动把你这个文字加链接样式、并且点击这个数字还会自动拨号！

telephone=no就忽略页面中的数字识别为电话号码

telephone=yes就开启了把数字转化为拨号链接,在默认是情况下就是开启！

<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 />

控制状态栏显示样式 default（白色）black（黑色） black-translucent（灰色半透明）

如果 apple-mobile-web-app-capable 设置为 yes 了，那么在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上。

而通过设置相应 apple-touch-icon 标签，则添加到主屏上的图标就会使用我们指定的图片。

以下是针对ox不同设备，选择一个最优icon。默认iphone的大小为60px，ipad为76px，retina屏乘以2倍。

<link rel=apple-touch-icon href=touch-icon-iphone.png><link rel=apple-touch-icon sizes=76×76″ href=touch-icon-ipad.png><link rel=apple-touch-icon sizes=120×120″ href=touch-icon-iphone-retina.png><link rel=apple-touch-icon sizes=152×152″ href=touch-icon-ipad-retina.png>

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

如果没有跟相应设备推荐尺寸一致的图标，那个会优先使用比推荐尺寸大，但最接近推荐尺寸的图标。

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

如些有多个图标符合推荐尺寸，会优先选择包含关键字precomposed的图标。

如果未在区域指定用link标签指定图标，会自动搜索网站根目录下以 apple-touch-icon 为前缀的png图标。

<meta http-equiv=X-UA-Compatible content=IE=edge>避免IE使用兼容模式

<meta name=MobileOptimized content=320″>微软为IE Mobile版设置的定义宽度标记

浏览器不会自动调整文件的大小,也就是说是固定大小,不会随着浏览器拉伸缩放。

<meta name=HandheldFriendly content=true />：是否对手持设备友好，只有true或者false

<meta name=screen-orientation content=portrait>强制竖屏

<meta name=full-screen content=yes>强制全屏

<meta name=browsermode content=application>应用模式

<meta name=x5-orientation content=portrait>强制竖屏

<meta name=x5-fullscreen content=true>强制全屏

<meta name=x5-page-mode content=app>应用模式

<meta name=renderer content=webkit>开启急速模式

meta指元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。

<meta content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0 name=viewport>     <meta content=yes name=apple-mobile-web-app-capable>     <meta content=black name=apple-mobile-web-app-status-bar-style>     <meta content=telephone=no name=format-detection>

第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；

• width - viewport的宽度 height - viewport的高度
• initial-scale - 初始的缩放比例
• minimum-scale - 允许用户缩放到的最小比例
• maximum-scale - 允许用户缩放到的最大比例
• user-scalable - 用户是否可以手动缩放

第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；

第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

在web app应用下状态条（屏幕顶部条）的颜色；

默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。

第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。

<meta name=aplus-terminal content=1/><meta name=apple-mobile-web-app-title content=TMALL/><meta name=apple-mobile-web-app-capable content=yes/><meta name=apple-mobile-web-app-status-bar-style content=black-translucent/><meta name=viewport content=width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no/><meta name=format-detection content=telephone=no, address=no>

<meta charset=utf-8><meta content=yes name=apple-mobile-web-app-capable/> <meta content=yes name=apple-touch-fullscreen/> <meta content=telephone=no,email=no name=format-detection/> <meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/><meta name=viewport content=initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no>

<title> 京东 - 手机版 </title><meta name=viewport content=width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;><meta http-equiv=Content-Type content=text/html; charset=GBK><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=format-detection content=telephone=no><meta http-equiv=Expires content=-1><meta http-equiv=Cache-Control content=no-cache><meta http-equiv=Pragma content=no-cache><meta name=Keywords content=><meta name=description content=>

<title>手机网易网</title><meta name=viewport content=width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no><meta content=telephone=no name=format-detection /><meta name=keywords content= /><meta name=description content= />

<meta name=referrer content=always><meta charset=utf-8><meta name=viewport content=width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no><meta name=format-detection content=telephone=no>

<title>手机搜狐网</title>                            <meta http-equiv=Content-Type content=text/html; charset=utf-8 /><meta http-equiv=Cache-Control content=no-cache /><meta name=viewport content=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0 /><meta name=MobileOptimized content=320/><meta name=description content= /><meta name=keywords content= />

----

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

viewport ->视窗(展示区域)

width=device-width设备宽度

<metaname = ‘viewport ’content = width=320><metaname = ‘viewport ’content = width=device-width>

user-scalable=no/0是否允许缩放

initial-scale=1.0初始值

maximum-scale=1.0

minimum-scale=1.0

------------—–

<meta name=viewport content=width=device-width, user-scalable=no>

user-scalable=no/0禁止用户缩放页面

<meta name=viewport content=width=device-width, user-scalable=no, initial-scale=1.0″>

initial-scale=1.0初始化页面缩放比例

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

maximum-scale=1.0最大缩放比例(为了个别手机华为Meta8)

------------—–

<!—允许网页以app形式运行(允许添加到主屏幕)—><meta name=apple-mobile-web-app-capable content=yes><!—状态栏颜色—><meta name=apple-mobile-web-app-status-bar-style content=black>

<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=apple-mobile-web-app-status-bar-style content=black><!—禁止之别电话号码和邮箱—><meta name=format-detection content=telephone=no,email=no>

<meta content=yes name=apple-mobile-web-app-capable><!–点击页面区域全屏展示—><meta content=yes name=apple-touch-fullscreen/><meta content=telephone=no,email=no name=format-detection/><!–应用信息，保留系统历史记录，运动效果–><meta name=App-Config content=fullscreen=yes,useHistoryState=yes,transition=yes/>

<!–强制让360浏览器用chrome内核渲染页面–><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>

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对VeVb武林网的支持。