移动设备的那些meta标签们

**fastpokemap** reply · March 03, 2017

翻evernote的时候发现去年做触屏站的时候整理的笔记，整理一下扔出来吧

viewport ¹ 标签移动网页中最常用的一个标签，最早由apple提出，现在已经成为事实标准了。

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

属性	例子	描述
width	width=320,width=device-width	定义viewport的宽度(单位是像素)。 device-width代表适应设备宽度。
height	height=480,height=device-height	同上...
user-scalable	user-scalable=yes	yes或者no来指定是否允许用户手动缩放 (不建议使用no)
initial-scale	initial-scale=1.0	初始缩放比例
minimum-scale	minimum-scale=1.0	允许用户缩放到的最小比例，范围（0.25~10.0）。
maximum-scale	maximum-scale=1.0	允许用户放大到的最大比例，范围（0.25~10.0）。
minimal-ui		移动端Safari浏览器不显示地址栏和工具栏(iOS7.1新增)

<meta name="MobileOptimized" content="320" />

告诉浏览器页面为某个宽度特殊优化 (微软系) ²

<meta name="HandheldFriendly" content="true" />

告诉浏览器页面是否为手持设备优化，会被MobileOptimized覆盖 (旧浏览器和功能机上某些浏览器识别)

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

启用webapp模式，会隐藏工具栏和菜单栏

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

启用webapp模式后，定义顶栏的颜色，值为default(白色) | black(黑色) | black-translucent(半透明)

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

电话号码和邮箱识别

target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

安卓设备上viewport的属性 ³ ，对应屏幕像素密度 (低像素密度，中像素密度，高像素密度),无特殊情况不建议使用。

References:

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

http://developer.android.com/guide/webapps/targeting.html

http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx