vue如何去掉手机名称

Step 1: 添加meta标签

在Vue应用的HTML文件中，首先需要添加一段meta标签。这个meta标签是一个视口设置，它可以让网页的内容缩放到设备的屏幕大小，并让视口的宽度等于设备的宽度。同时，我们在这个meta标签中设置了浏览器不要在标题栏中显示手机名称。

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

Step 2: 添加CSS样式

在CSS中，我们需要针对不同的移动设备添加样式。以下是一个示例代码，可以去掉绝大部分移动设备在浏览器标题栏中显示的手机名称。

/*去掉iPhone(OS>
7)中的Safari的工具栏和菜单栏*/
@mediascreenand(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的工具栏和菜单栏*/
@mediascreenand(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-documenturl-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浏览器顶部和底部的菜单栏和工具栏*/
@mediascreenand(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浏览器顶部和底部的菜单栏和工具栏*/
@mediascreenand(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;

}

}
    

读到这里，这篇“vue如何去掉手机名称”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注行业资讯频道。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！