pc端与移动段的互相切换

最新推荐文章于 2024-09-06 17:11:11 发布

Hope°

最新推荐文章于 2024-09-06 17:11:11 发布

阅读量1.5k

点赞数 1

分类专栏：笔记 js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/m0_52773472/article/details/116535796

版权

笔记同时被 2 个专栏收录

24 篇文章

订阅专栏

20 篇文章

订阅专栏

本文介绍了如何使用H5的navigator属性实现从PC页面到移动页面以及从移动页面回切至PC页面的切换。通过检测用户代理（navigator.userAgent）来判断设备类型，并相应地重定向页面。为了确保效果准确，建议进行真机测试或使用手机模拟器进行验证。

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

实现页面切换的话主要是使用到了h5新增的navigator属性。

操作：

PC页面=>PE页面

如果当前是pc端页面，加入以下代码，更改移动段代码，点击F12然后刷新页面即可进行切换。

    if (/Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test(
            navigator.userAgent)) {
        window.location.replace("./mobile.html");
    }

在这里插入图片描述

PE页面=>PC页面

同样在移动段要切会PC页面的话，只需要在前面加一个‘!’，并且更改pc页面路径即可。

  if (!/Android|webOS| iPhone | iPad | iPod |BlackBerry|opera mini|opera mobile|appleWebkit.*mobile|mobile/i.test(
            navigator.userAgent)) {
        window.location.replace("./index.html");
    }