判断pc还是移动端跳转到不同页面

最新推荐文章于 2024-02-07 17:40:04 发布
最新推荐文章于 2024-02-07 17:40:04 发布
阅读量4.9k 收藏 1
点赞数
分类专栏： html5 文章标签： 移动 pc
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangyun_www/article/details/72569920
版权
本文介绍了如何根据设备类型（PC或移动端）实现自动跳转到相应页面的技术方案，确保用户在不同设备上获得最佳浏览体验。
摘要由CSDN通过智能技术生成 
<script type="text/javascript">
    function browserRedirect() {
    
        var sUserAgent= navigator.userAgent.toLowerCase();
        var bIsIpad= sUserAgent.match(/ipad/i) == "ipad";
        var bIsIphoneOs= sUserAgent.match(/iphone os/i) == "iphone os";
        var bIsMidp= sUserAgent.match(/m
最低0.47元/天 解锁文章
wangyun_www
关注
专栏目录
移动端页面与PC页面之间的跳转
qq_22884935的博客
10-12 910
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
JS 判断手机端和pc端后跳转对应页面
04-23
NULL 博文链接：https://onestopweb.iteye.com/blog/2255636
判断是PC端还是移动端
weixin_30528371的博客
01-12 231
var browser={ versions:function(){ var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: ...
详解JS判断页面是在手机端还是在PC端打开的方法
11-26
我们想要的效果是pc文件和mobile文件统一入口，适配不同的设备。 先看看项目的目录： 在index.html里面配置js控制选择那一个文件夹下的文件就可以了。 我们要利用：Navigator 对象，Navigator 对象包含有关浏览器的信息。 index.html很简单，直接上码吧： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" /> <scrip
js判断PC端与移动端跳转
12-07
在网上看到很多这样类似的代码，但是有的很复杂，或者有的没有判断完全，上次经理去见完客户回来讲，使用苹果浏览打开pc端（pc已经做了识别跳转）会自动跳转到移动端的网页去，后来经测试才发现 [removed]ln(" 是否为移动终端: "+browser.versions.mobile+"</br>");  //打印出来 true 所以在完整版的代码中 第一层if 判断一直是true 以上的原因是因为，网上流传的判断为：  mobile: !! u.match(/AppleWebKit.*Mobile.*/) || !! u.match(/AppleWebKit/), //是否为移动终端
判断是移动端还是pc端
我是希希呀的博客
10-16 1717
if(navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || na
基于VUE实现判断设备是PC还是移动端
10-15
在前端开发中，有时我们需要根据用户使用的设备类型来提供不同的界面体验，这通常涉及到判断设备是PC还是移动端。Vue.js，作为一个轻量级且强大的前端框架，提供了多种方式来实现这种设备判断。本文将详细介绍如何在...
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
10-22
响应式设计可以让同一个页面在不同设备上呈现出合适的布局，而本文所述的方法则是直接将移动端用户重定向到专为移动设备设计的页面。 实现这个功能的关键在于编写一个JavaScript函数，该函数检查用户的用户代理...
判断用户是PC端还是移动端
qq_41797053的博客
03-07 1047
function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod' ]; ...
如何判断移动端和PC端
wolfking__的博客
11-05 292
如何判断移动端和PC端 <script> var pp = navigator.userAgent console.log(pp) if(pp.includes('Mobile')){ // 这是移动端 window.location.href = "https://www.baidu.com/"; } else { // 这是PC端 window.location.href = "http://
自动识别移动端还是PC端
dazn33036的博客
06-27 206
　　平时在开发中经常会遇到这样的需求，除了开发PC端之外，还会同时开发移动端。对于简单的页面，可以使用bootstrap之类的框架实现响应式页面，可是当页面很复杂的时候，就需要开发一个移动端页面，一个PC端页面。这个时候，就会遇到这样的需求，想要访问同样的网址，然后根据设备不同显示不同的页面。之前一直想招相关的资料没有找到，到后来发现是我百度搜索的水平不行，心好累~~~下面就是我找到的通...
判断页面是在pc端还是移动端打开不同的页面
12-06 164
在pc端页面上的判断 var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", "lg", "ucweb", "skyfire"); var br...
在手机端输入PC站的网址，自动跳掉移动端的网址写法：
linhui03的博客
08-07 2466
try { var urlhash = window.location.hash; if (!urlhash.match("fromapp")) { if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iPad)/i))) { window.location="这里写移动端的网址，注意要http：//开头"; } }
判断当前的浏览段是pc还是移动设备，如果是手机，就跳转到对应手机端网站
05-17 6442
判断当前的浏览段是pc还是移动设备，如果是手机，就跳转到对应手机端网站 varsUserAgent=navigator.userAgent; varmobileAgents=['Android','iPhone','Symbian','WindowsPhone','iPod','BlackBerry','Windows CE']; vargoUrl = 0; for( va
pc端移动端相互切自动换跳转（全网最简单最全方法）
最新发布
qq_52850749的博客
02-07 1116
喜报喜报！！！！！！今年最后三十分钟的上班时间，事情不多写下这篇文章最近pm提的一个功能。最开始在网上找了很多方法，很多都是判断浏览器内核或者uniapp的api判断移动端设备信息进行跳转，出现了一些问了，于是自己着手写了一个简单粗暴的方法，直接监听页面尺寸进行跳转，而且pc切换成移动端或者移动端切换成pc端能话不多说，开讲了 ps：由于我做的项目pc端和移动端的app.vue文件里面一个是v2的写法一个是v3的写法，所以下面我会将vue2和vue3的写法都展示出来，所以很全。pc（vue3）
3种方法判断手机浏览器跳转WAP手机网站
weixin_30914981的博客
02-09 293
　　随着移动设备的普及，企业的网络宣传已经不能局限在PC端，而需要同时在移动端有所建树。对于公司网站来说，以前都是做的PC端的，当然手机等移动端也可以访问，但是用户体验肯定不如完全适合的手机端来的方便。我们在给自己的网站做了WAP手机网站之后，如果有用户通过手机访问我们的企业顶级域名网站，那就判断跳转到专为的手机站点。　　　　第一种：直接JS脚本　　　　<script type="text/...
判断手机终端并自动跳转js代码及使用实例
xmlife的专栏
12-14 1019
function uaredirect(f) {     try {         if (document.getElementById("bdmark") != null) {             return         }         var b = false;         if (arguments[1]) {             var e = w
nuxt 判断是pc端和移动端跳转路由
03-31
在 Nuxt.js 中，我们可以使用插件判断是 PC 端还是移动端，然后根据不同的设备跳转到不同的路由。 下面的代码演示了如何编写一个插件来实现这个功能： ```javascript // plugins/device.js export default ({ app }, inject) => { const userAgent = process.server ? app.$ua.get('User-Agent') : navigator.userAgent const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( userAgent ) inject('device', { isMobile, redirect(path) { const url = isMobile ? `/m${path}` : path if (process.client) { window.location.href = url } else { app.context.redirect(url) } } }) } ``` 在插件中，我们首先获取了用户代理（userAgent），然后使用正则表达式来判断是否是移动设备。如果是移动设备，我们就将路径前缀设置为 "/m"，否则就保持原样。 接着，我们定义了一个名为 "redirect" 的方法，用于根据设备类型跳转路由。如果在客户端中调用该方法，我们就直接跳转到指定的 URL；如果在服务器端中调用该方法，我们就使用上下文对象（context）的 redirect 方法来跳转路由。 最后，我们将插件作为 Nuxt.js 的插件进行注册： ```javascript // nuxt.config.js export default { plugins: ['~/plugins/device.js'] } ``` 现在，我们就可以在页面中使用该插件了。例如，我们可以编写一个页面组件来测试： ```html <!-- pages/index.vue --> <template> <div> <h1>首页</h1> <button @click="goToAbout">跳转到关于页</button> </div> </template> <script> export default { methods: { goToAbout() { this.$device.redirect('/about') } } } </script> ``` 在上面的代码中，我们定义了一个按钮，当用户点击该按钮时，就会调用 $device.redirect 方法来跳转到 "/about" 路由。如果是在移动设备上访问，就会跳转到 "/m/about" 路由。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值