javascript - 下面这一段关于meta是什么意思呀？

Question

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

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">

哪位大神可以详细的解释一下，还有就是那位大神写的有关于meta的用法全集分享一下呗

Answer 1

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

这两个是苹果专用的标签，设置这个页面可以从主屏幕启动，并使用全屏，全屏模式下状态栏的样式是黑色。

<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">

这两个是功能机时代的旧标签，用来标记手机版页面，现在基本废弃了。

<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">

这个是响应式标签。
width=device-width规定了视口宽度与屏幕宽度相等；
target-densitydpi=160dpi是安卓旧时代的缩放标签，现在已经被WebKit废弃；
initial-scale=1.0是默认缩放比；
maximum-scale=1是最大缩放比；
user-scalable=no是是否允许用户缩放；
minimal-ui是苹果专用的旧标签，用来隐藏导航栏和任务栏，ios8已经废弃。

Answer 2

各种meta解释

Answer 3

//删除苹果默认的工具栏和菜单栏
<meta name="apple-mobile-web-app-capable" content="yes">

//设置苹果工具栏颜色
<meta name="apple-mobile-web-app-status-bar-style" content="black">

// 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 
<meta name="HandheldFriendly" content="True">

// 微软的老式浏览器
<meta name="MobileOptimized" content="320">

// 优化移动浏览器的显示 css像素宽度等于设备像素宽度，不允许缩放
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0, maximum-scale=1, user-scalable=no, minimal-ui">

meta手册