您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

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

时间:2019-11-04 17:03:36  来源:  作者:

在前端开发中,一个好的网站,一定是布局好看,前期开发时,都会以单个尺度进行布局,比如使用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之间的访问交互。有一处需要注意,并不是只在首页做一个判断就可以的,虽然这么做,正文的访问入口分开样式是没问题的,但网站是可以经过用户分享的,网站地址分享可能是你网站中任意一个地址。所以还是建议在每次访问时都做判断,因为不是调用第三方,所以是不会影响你的性能的。



Tags:前端   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除,谢谢。
▌相关推荐
学Java还是前端?我个人认为学前端会好一些。为什么我会这么认为呢?一、入门在刚入门时,前端的起点较低,对逻辑的要求也比Java更低些。前端编写的程序代码能直接出现在界面上,直观...【详细内容】
2021-07-13  Tags: 前端  点击:(6)  评论:(0)  加入收藏
1、D2admin开源地址: https://github.com/d2-projects/d2-admin文档地址: https://d2.pub/zh/doc/d2-admin/效果预览: https://d2.pub/d2-admin/preview/#/index开源协议:MITima...【详细内容】
2021-07-13  Tags: 前端  点击:(6)  评论:(0)  加入收藏
领域驱动,各自只管各自的模块,顶层再来进行组装和分配...【详细内容】
2021-06-25  Tags: 前端  点击:(17)  评论:(0)  加入收藏
这些年前端发生了天翻地覆的变化,几乎每隔几个月就有新的框架和技术诞生,有些技术可能你还没来得及学习,它就已经成为过去时了。2021年前端会有哪些变化,哪些技术会脱颖而出呢?Ja...【详细内容】
2021-06-23  Tags: 前端  点击:(18)  评论:(0)  加入收藏
刚入门Web开发者总会听到前端开发、后端开发、全栈开发等岗位描述及相关介绍说明。很多人不清楚前端、后端、全栈到底指的是什么?对应岗位需求是什么?俗话说“磨刀不误砍柴工...【详细内容】
2021-06-16  Tags: 前端  点击:(33)  评论:(0)  加入收藏
“前端如何解决跨域问题?” 这个是前段在知乎看到的一个提问,这几乎是做前端都会遇到的一个问题,产生的情况可能会很多,解决一个问题还是要先了解下为什么会产生这样问题,学习最好的方法就是结合一些实际的案例来学习,理解...【详细内容】
2021-06-09  Tags: 前端  点击:(46)  评论:(0)  加入收藏
前端大佬问我后端小白查最近10分钟的数据,一开始我想到的是直接用between and或者<>就可以了,但是可能是想要最近的10分钟,那么这个数就不太好写清楚,只能是当前时间-10分钟这种...【详细内容】
2021-06-04  Tags: 前端  点击:(37)  评论:(0)  加入收藏
各位读者朋友们好,我是龙叔,1名退休老码农,如果从工作算起的话我的码龄有18年,今天我来对前端、后端、全栈这3个方面分享一下我的见解,对于准备学编程或者刚学编程不久的小友,让我...【详细内容】
2021-05-19  Tags: 前端  点击:(57)  评论:(0)  加入收藏
大家好,我是鱼皮,今天分享我的老弟第一次写后端代码时出现的囧事,希望大家引以为戒。孽起我的老弟小阿巴,目前大一,自学编程有一段时间了,之前主要以学前端为主,比较好上手。但这货...【详细内容】
2021-05-17  Tags: 前端  点击:(76)  评论:(0)  加入收藏
Bootstrap 5.0正式发布了,带来了很多亮点,还学得动吗?Bootstrap 介绍Bootstrap 是前些年十分流行,当前比较流行的前端框架,由国内上不了的推特出品,基于 css / html / javascript...【详细内容】
2021-05-14  Tags: 前端  点击:(106)  评论:(0)  加入收藏
▌简易百科推荐
一、Aliyun Java Initializr阿里中间件发布的定制版Spring Initializr。是集文档、erminal、编辑器三个窗口为一体的。 二、Cloud Toolkit简单来说就是可以快速部署远程服务...【详细内容】
2021-07-15  传智教育官方账号    Tags:在线工具   点击:(4)  评论:(0)  加入收藏
本文介绍PacketQueue,相对于FrameQueue来说比较简单,可以类比Android中的MessageQueue。PacketQueue总体介绍 单向链表结构。first_pkt、last_pkt,是链表的起点和终点结点;recyc...【详细内容】
2021-07-13  程序员老z    Tags:源码   点击:(3)  评论:(0)  加入收藏
TCP客户端:1.建立连接套接字,设置Ip和端口监听,socket()2.建立连接 connect3.write() 获取网络流量对象 发送数据4.read()获取网络流量对象 接收数据5.关闭套接字 TCP服务器端1...【详细内容】
2021-07-08  树朦胧    Tags:socket编程   点击:(8)  评论:(0)  加入收藏
Rust的异步功能很强大,但也以晦涩难懂著称。在本文中,我将总结之前提过的一些想法,并给出一些新的点子,看看这些想法放在一起能产生什么效果。...【详细内容】
2021-07-07  弯月  CSDN  Tags:Rust   点击:(6)  评论:(0)  加入收藏
1.进程 2.线程 3.主线程主线程就是java 中main方法 如果是单线程的话,有p1,p2两个对象,他们中间有一条语句。若是单线程,若这条语句出错,则p2不执行了。若是多线程则p2还可以执...【详细内容】
2021-07-04  程序猿凯撒    Tags:线程   点击:(14)  评论:(0)  加入收藏
作者 | edmz译者 | 王强策划 | 万佳多年来,我已经为很多 API 实现了客户端。为此,我整理了一份清单,列出了一些可以改善开发体验的小技巧。这些想法大都与 API 设计或架构无关...【详细内容】
2021-06-29  技术联盟总坛    Tags:API   点击:(16)  评论:(0)  加入收藏
本系列会讲述微信机器人技术的实现,第一讲主要了解微信网页版给我们提供的http接口,这一步是做一个基于微信网页版机器人的基础和难点。本讲将微信网页版的主要接口罗列出,并给...【详细内容】
2021-06-29  闪客sun  博客园  Tags:微信   点击:(12)  评论:(0)  加入收藏
我们看到很多关于在浏览器里使用js-ipfs的问题。这篇文章展示了用js-ipfs搭建最小化的聊天应用的例子,这个应用可以在浏览器中运行。它使用WebRTC去实现浏览器对浏览器的连...【详细内容】
2021-06-25  IPFSFilecoinFIL    Tags:IPFS连接   点击:(14)  评论:(0)  加入收藏
先举例子来理解这2个概念的区别。老师让两个同学去办公室谈话。如果这两同学(进程)是并列跨过办公室门(CPU)的,那么就是并行。如果同学A先进同学B后进入(或者先B后A),或者两人...【详细内容】
2021-06-24  linux技术栈    Tags:并发   点击:(18)  评论:(0)  加入收藏
这些年前端发生了天翻地覆的变化,几乎每隔几个月就有新的框架和技术诞生,有些技术可能你还没来得及学习,它就已经成为过去时了。2021年前端会有哪些变化,哪些技术会脱颖而出呢?Ja...【详细内容】
2021-06-23  梦回故里归来  今日头条  Tags:前端编程   点击:(18)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条