仿响应式html:JS判断页面是在手机端还是PC端打开

本文介绍如何使用JavaScript来判断网页是在手机端还是PC端打开,并根据设备类型实现自动跳转到相应版本的页面,确保用户体验的一致性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

我们通常想要输入同样的域名,从PC端打开是PC端的页面,而用移动端打开则是移动端的页面。需要在PC端的index.html里面配置JS控制识别。如果是移动设备则自动识别跳转到移动端的域名链接,打开的是移动端的index.html页面:

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml">
 	<head>
 		<script>
            function autoLoad() {
                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(/midp/i) == "midp"; //移动设备
                var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4"; //手机浏览器
                var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb"; //uc手机浏览器
                var bIsAndroid = sUserAgent.match(/android/i) == "android";
                var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce"; //windows 移动平台
                var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
                if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                    window.location.href = 'http://m.abc.com/';     //移动端域名
                }
            }     
        </script>
    </head>
    <body>
    </body>
</html>    
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值