How to remove the mobile phone name in vue

In mobile browsers, we often see the brand and model of the mobile phone displayed in the title bar of the browser. This is a feature of the browser's default settings. However, in some cases, we may need to remove this information in the title bar. For example, in a web application, we only need to display the title of our own application, or we want to display the entire page as much as possible. In this case, we need to remove the browser The phone name in the title bar.

This article will introduce how to remove the mobile phone name in the Vue application.

Step 1: Add meta tag

In the HTML file of the Vue application, you first need to add a meta tag. This meta tag is a viewport setting that allows the content of the web page to be scaled to the device's screen size and the width of the viewport to be equal to the width of the device. At the same time, we set the browser in this meta tag not to display the mobile phone name in the title bar.

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

Step 2: Add CSS styles

In CSS, we need to add styles for different mobile devices. The following is a sample code that can remove the mobile phone name displayed in the browser title bar on most mobile devices.

/* 去掉 iPhone(OS>7) 中的 Safari 的工具栏和菜单栏 */
@media screen and (device-aspect-ratio: 2/3) and (-webkit-min-device-pixel-ratio: 2) {
  html {
    overflow: hidden;
    margin: 0;
    padding: 0;
  }
  /* 这里的 nav 和 adress 是由于 iPhone 应用的导航栏和状态栏的元素名 */
  nav, address {
    display: none;
  }
}

/* 去掉 iPhone(OS>7) 中的 Safari 的工具栏和菜单栏 */
@media screen and (device-aspect-ratio: 40/71) and (-webkit-min-device-pixel-ratio: 2) {
  html {
    overflow: hidden;
    margin: 0;
    padding: 0;
  }
  nav, address {
    display: none;
  }
}

/* 去掉Android手机的工具栏和菜单栏 */
@-moz-document url-prefix() {
  /* Firefox */
  html {
    margin-top: -15px !important;
    padding-bottom: 15px !important;
  }
  nav, address {
    display: none !important;
  }
}

/* 去掉微信浏览器顶部的网页导航栏 */
body {
  padding-top: 44px !important;
  margin-top: -44px !important;
} 

/* 去掉UC浏览器顶部和底部的菜单栏和工具栏 */
@media screen and (max-aspect-ratio: 1/1) {
  /* max-aspect-ratio 的值为防止屏幕横向显示时错位 */
  html {
    overflow: auto !important;
    margin-top: 0 !important;
  }
  /* 这里的 #banner 是 UC 应用的导航栏标签名，#footer 是 UC 应用的底部栏标签名 */
  #banner, #footer {
    display: none !important;
  }
}

/* 去掉QQ浏览器顶部和底部的菜单栏和工具栏 */
@media screen and (max-aspect-ratio: 1/1) {
  /* max-aspect-ratio 的值为防止屏幕横向显示时错位 */
  html {
    overflow: auto !important;
    margin-top: 0 !important;
  }
  /* 这里的.m-commonHeader是QQ浏览器的顶部栏，.m-commonFooter是QQ浏览器的底部栏 */
  .m-commonHeader, .m-commonFooter {
    display: none !important;
  }
}

Step 3: Verify the effect

After completing the above two steps, we can open the Vue application in the browser on the mobile device to verify that the mobile phone name has been removed.

Summary

By adding meta tags and CSS styles, we can easily remove the mobile device name from the browser title bar. This method is very practical when developing web applications or mobile H5 pages. With it, we can more flexibly control the display effect of the page.

The above is the detailed content of How to remove the mobile phone name in vue. For more information, please follow other related articles on the PHP Chinese website!