Bagaimana untuk membuang nama telefon bimbit dalam vue

Dalam penyemak imbas mudah alih, kita sering melihat jenama dan model telefon mudah alih dipaparkan dalam bar tajuk penyemak imbas Ini adalah ciri tetapan lalai penyemak imbas. Walau bagaimanapun, dalam beberapa kes, kami mungkin perlu mengalih keluar maklumat ini dalam bar tajuk Contohnya, dalam aplikasi web, kami hanya perlu memaparkan tajuk aplikasi kami sendiri atau kami mahu memaparkan keseluruhan halaman sebanyak mungkin. . Dalam kes ini, kita perlu mengalih keluar penyemak imbas Nama telefon dalam bar tajuk.

Artikel ini akan memperkenalkan cara mengalih keluar nama telefon mudah alih dalam aplikasi Vue.

Langkah 1: Tambah tag meta

Dalam fail HTML aplikasi Vue, anda perlu menambah tag meta terlebih dahulu. Tag meta ini ialah tetapan viewport yang membenarkan kandungan halaman web diskalakan kepada saiz skrin peranti dan lebar viewport supaya sama dengan lebar peranti. Pada masa yang sama, kami menetapkan penyemak imbas dalam tag meta ini untuk tidak memaparkan nama telefon bimbit dalam bar tajuk.

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

Langkah 2: Tambah gaya CSS

Dalam CSS, kita perlu menambah gaya untuk peranti mudah alih yang berbeza. Berikut ialah contoh kod yang boleh mengalih keluar nama telefon mudah alih yang dipaparkan dalam bar tajuk penyemak imbas pada kebanyakan peranti mudah alih.

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

Langkah 3: Kesan pengesahan

Selepas melengkapkan dua langkah di atas, kami boleh membuka aplikasi Vue dalam penyemak imbas pada peranti mudah alih untuk mengesahkan bahawa nama telefon bimbit telah dialih keluar .

Ringkasan

Dengan menambahkan tag meta dan gaya CSS, kami boleh mengalih keluar nama peranti mudah alih daripada bar tajuk penyemak imbas dengan mudah. Kaedah ini sangat praktikal apabila membangunkan aplikasi web atau halaman H5 mudah alih Dengannya, kita boleh mengawal kesan paparan halaman dengan lebih fleksibel.

Atas ialah kandungan terperinci Bagaimana untuk membuang nama telefon bimbit dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!