移动设备的那些meta标签们
翻evernote的时候发现去年做触屏站的时候整理的笔记,整理一下扔出来吧
viewport (虚拟视窗)
viewport 1 标签移动网页中最常用的一个标签,最早由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新增) |
MobileOptimized
<meta name="MobileOptimized" content="320" />
告诉浏览器页面为某个宽度特殊优化 (微软系) 2
HandheldFriendly
<meta name="HandheldFriendly" content="true" />
告诉浏览器页面是否为手持设备优化,会被MobileOptimized覆盖 (旧浏览器和功能机上某些浏览器识别)
Apple私有
<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(半透明)
format-detection
<meta name="format-detection" content="telphone=no, email=no" />
电话号码和邮箱识别
target-densitydpi
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
安卓设备上viewport的属性 3 ,对应屏幕像素密度 (低像素密度,中像素密度,高像素密度),无特殊情况不建议使用。
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
Valuable information! Looking forward to seeing your notes posted. Thank you for sharing the nice article. Good to see your article. http://appsforsys.com/fastpokemap/