search

Home  >  Q&A  >  body text

javascript - What does the following paragraph about meta mean?

<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

高洛峰高洛峰2747 days ago616

reply all(3)I'll reply

  • 迷茫

    迷茫2017-05-19 10:43:48

    <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.

    reply
    0
  • 迷茫

    迷茫2017-05-19 10:43:48

    Various meta explanations

    reply
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-19 10:43:48

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

    reply
    0
  • Cancelreply