JavaScript判断页面当前浏览设备为移动端还是PC端，实现自动加载对应端页面

最新推荐文章于 2023-06-09 10:19:57 发布

ECMAScripter

最新推荐文章于 2023-06-09 10:19:57 发布

阅读量7.4k

点赞数 2

分类专栏：前端解决方案文章标签：前端设备检测

本文链接：https://blog.csdn.net/Fabulous1111/article/details/78752590

版权

前端解决方案专栏收录该内容

62 篇文章 3 订阅

订阅专栏

我们想要的效果是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" />
        <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(/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";
                var bIsAndroid = sUserAgent.match(/android/i) == "android";
                var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
                var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
                if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
                    //跳转移动端页面
                    window.location.href="http://f.jcngame.com/fanfan20171208/mobile/index.html";
                } else {
                    //跳转pc端页面
                    window.location.href="http://f.jcngame.com/fanfan20171208//fanmai/index.html";
                }
            }
            browserRedirect(); 
        </script>
    </head>
    <body>

    </body>
</html>

这里写图片描述

ECMAScripter

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript判断页面当前浏览设备为移动端还是PC端，实现自动加载对应端页面

我们想要的效果是pc文件和mobile文件统一入口，适配不同的设备。先看看项目的目录：在index.html里面配置js控制选择那一个文件夹下的文件就可以了。我们要利用：Navigator 对象，Navigator 对象包含有关浏览器的信息。 index.html很简单，直接上码吧：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; ...
复制链接

扫一扫