javascript - What does the following paragraph about meta mean?
高洛峰
高洛峰 2017-05-19 10:41:48
0
3
634
<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">

Which master can explain it in detail, and also share the complete collection of the usage of meta written by that master

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all(3)
迷茫
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

These two are Apple-specific labels. Set this page to be launched from the home screen and use full screen. The style of the status bar in full screen mode is black.

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

These two are old tags from the feature phone era, used to mark mobile version pages, and are now basically abandoned.

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

This is a responsive tag.
width=device-width specifies that the viewport width is equal to the screen width;
target-densitydpi=160dpi is the scaling tag of the old Android era, which has now been abandoned by WebKit;
initial-scale=1.0 is the default scaling ratio;
maximum- scale=1 is the maximum zoom ratio;
user-scalable=no is whether users are allowed to zoom;
minimal-ui is an old label dedicated to Apple, used to hide the navigation bar and taskbar, and has been abandoned in ios8.

迷茫

Various meta explanations

曾经蜡笔没有小新
//删除苹果默认的工具栏和菜单栏
<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 manual

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template