Comment supprimer le nom du téléphone mobile en vue

Dans les navigateurs mobiles, nous voyons souvent la marque et le modèle du téléphone mobile affichés dans la barre de titre du navigateur. Il s'agit d'une fonctionnalité du paramètre par défaut du navigateur. Cependant, dans certains cas, nous pouvons être amenés à supprimer ces informations dans la barre de titre. Par exemple, dans une application Web, nous devons uniquement afficher le titre de notre propre application ou nous souhaitons afficher la page entière autant que possible. Dans ce cas, nous devons supprimer le navigateur. Le nom du téléphone dans la barre de titre.

Cet article explique comment supprimer le nom du téléphone mobile dans l'application Vue.

Étape 1 : Ajouter une balise méta

Dans le fichier HTML de l'application Vue, vous devez d'abord ajouter une balise méta. Cette balise méta est un paramètre de fenêtre d'affichage qui permet au contenu de la page Web d'être adapté à la taille de l'écran de l'appareil et à la largeur de la fenêtre d'affichage d'être égale à la largeur de l'appareil. Dans le même temps, nous configurons le navigateur dans cette balise méta pour qu'il n'affiche pas le nom du téléphone mobile dans la barre de titre.

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

Étape 2 : Ajouter des styles CSS

En CSS, nous devons ajouter des styles pour différents appareils mobiles. Voici un exemple de code permettant de supprimer le nom du téléphone mobile affiché dans la barre de titre du navigateur sur la plupart des appareils mobiles.

/* 去掉 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;
  }
}

Étape 3 : Effet de vérification

Après avoir terminé les deux étapes ci-dessus, nous pouvons ouvrir l'application Vue dans le navigateur de l'appareil mobile pour vérifier que le nom du téléphone mobile a été supprimé.

Résumé

En ajoutant des balises méta et des styles CSS, nous pouvons facilement supprimer le nom de l'appareil mobile de la barre de titre du navigateur. Cette méthode est très pratique lors du développement d'applications Web ou de pages mobiles H5. Grâce à elle, nous pouvons contrôler l'effet d'affichage de la page de manière plus flexible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!