下面这一段关于meta是什么意思呀?

<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的用法全集分享一下呗

阅读 3.2k
3 个回答
<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已经废弃。

//删除苹果默认的工具栏和菜单栏
<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手册

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题