移动设备的那些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


Comments
Write a Comment
  • fastpokemap

    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/