安基网 首页 脚本 JavaScript 查看内容

前端如何动态判断访问者是PC访问还是app手机访问

2019-11-5 09:28| 投稿: xiaotiger |来自: 互联网


免责声明:本站系公益性非盈利IT技术普及网,本文由投稿者转载自互联网的公开文章,文末均已注明出处,其内容和图片版权归原网站或作者所有,文中所述不代表本站观点,若有无意侵权或转载不当之处请从网站右下角联系我们处理,谢谢合作!

摘要: 在前端开发中,一个好的网站,一定是布局好看,前期开发时,都会以单个尺度进行布局,比如使用PC浏览器进行调试样式,当网站上线后。会遇到这么一个尬尴的场景,有一个访问者在PC浏览器上了你的网站,发现你的网站很不错,然后使用QQ或微信等聊天工具分享了你的网站地址。这个时候,访问者的朋友正在玩 ...

在前端开发中,一个好的网站,一定是布局好看,前期开发时,都会以单个尺度进行布局,比如使用PC浏览器进行调试样式,当网站上线后。会遇到这么一个尬尴的场景,有一个访问者在PC浏览器上了你的网站,发现你的网站很不错,然后使用QQ或微信等聊天工具分享了你的网站地址。这个时候,访问者的朋友正在玩手机,收到后,肯定当场打开。结果就是,一个布局很乱的网站,看一眼就关闭了。原因是什么?就是网站是以PC大屏幕布局的,而手机是小型机,在一些固定大小的样式在手机上,很容易被挤压而使得布局很乱。

当然,你可以再布局一套适合手机端大小的网站出来,但前提是,你怎么知道访问者是用PC浏览器访问还是用手机访问?这时候,你就可以加上下面这段代码,获取到你所需要的结果。

let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
if (flag) {
console.log("手机端");

// this.$router.replace(url);
} else {
console.log("pc端");

// this.$router.replace(url);
}

建议:这种判断,最好放在一处地方进行处理,不要在所有页面都加这个判断,本论坛前端采用的是VUE开发,把判断放在钩子上,在每次路由时,都会进行判断一次,然后动态分配路由。比如PC的人分享了PC的网址,在你手机上点开时,就会自动路由到手机上的网址,反之也一样。这样就解决了PC与APP之间的访问交互。有一处需要注意,并不是只在首页做一个判断就可以的,虽然这么做,正文的访问入口分开样式是没问题的,但网站是可以经过用户分享的,网站地址分享可能是你网站中任意一个地址。所以还是建议在每次访问时都做判断,因为不是调用第三方,所以是不会影响你的性能的。



小编推荐:欲学习电脑技术、系统维护、网络管理、编程开发和安全攻防等高端IT技术,请 点击这里 注册账号,公开课频道价值万元IT培训教程免费学,让您少走弯路、事半功倍,好工作升职加薪!

本文出自:https://www.toutiao.com/a6755326735501230603/

免责声明:本站系公益性非盈利IT技术普及网,本文由投稿者转载自互联网的公开文章,文末均已注明出处,其内容和图片版权归原网站或作者所有,文中所述不代表本站观点,若有无意侵权或转载不当之处请从网站右下角联系我们处理,谢谢合作!


鲜花

握手

雷人

路过

鸡蛋

相关阅读

最新评论

 最新
返回顶部