1. 判断浏览器类型
浏览器判断使用的github开源项目current-device,下面是地址:
https://github.com/matthewhudson/current-device 在浏览器中可以使用下面地址进行浏览器引入,但是加载速度慢,不建议使用,我这里是直接下载本地。
<script src="https://unpkg.com/current-device/umd/current-device.min.js"></script>
2. 根据浏览器跳转到对应的页面

这是我的项目结构:

│  about_us.html
│ index.html
├─js
│ current-device.min.js
│ defalut.js
└─mobile
about_us.html
index.html

其实只要把移动端页面放在mobile目录下即可,然后需要在每个页面(PC端和移动端)引入current-device.min.js和defalut.js,然后浏览器访问时,执行defalut.js的方法进行跳转。

defalut.js内容如下:

// 判断浏览器类型,跳转到对应的页面
if (device.mobile() && !location.pathname.startsWith("/mobile")) {
window.location.href = location.protocol + "//" + location.host + "/mobile" + location.pathname + location.search;
} else if (device.windows() && location.pathname.startsWith("/mobile")) {
let pathname = location.pathname;
let pcpath = pathname.substring(("/mobile".length), pathname.length);
window.location.href = location.protocol + "//" + location.host + pcpath + location.search;
}

defalut.js主要是根据当前浏览器的类型来增加和删除子目录,在移动端时,我就判断路径是否以 “mobile” 开头,不是我就在中间插入 “/mobile” ,在PC端同样如此操作。

js -- 移动端pc端自动切换的更多相关文章

  1. js 设备判断(移动端pc端 安卓ios 微信)

    苹果安卓判断 $(function () { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.in ...

  2. js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小

    众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但 ...

  3. js判断是pc端还是移动端

    function checkMobile() { var pda_user_agent_list = new Array("2.0 MMP", "240320" ...

  4. 移动端&PC端CSS样式兼容代码

    CSS样式兼容代码 1.禁止选中复制文本 *{ user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-us ...

  5. REM布局计算,移动端,pc端有兼容性)

    rem布局计算(移动端,pc端有兼容性) <!DOCTYPE html> <html> <head lang="en"> <script& ...

  6. Charles如何抓取https请求-移动端+PC端

    Charles安装完成,默认只能抓取到http请求,如果查看https请求,会显示unkonw或其它之类的响应.所以需要先进行一些配置,才能抓取到完整的https请求信息.下面针对PC端和手机端抓包的 ...

  7. JS手机访问PC端网站自动跳转到手机端网站

    <script type="text/javascript"> //移动端url跳转,自定义部分开始 function mobile_device_detect(url ...

  8. js判断是否pc端

    function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ['Android', 'iPhone', 'Symbi ...

  9. js轮播功能 标签自动切换 同页面多轮播js

    需要加入jquery 1.43及以上版本 下面还有个简单版,一个页面只支持一个轮播 同页面多轮播js <div> <div class="yt_content"& ...

随机推荐

  1. light oj 1045 - Digits of Factorial K进制下N!的位数

    1045 - Digits of Factorial Factorial of an integer is defined by the following function f(0) = 1 f(n ...

  2. 实验一  GIT 代码版本管理

    实验一  GIT 代码版本管理 实验目的: 1)了解分布式分布式版本控制系统的核心机理: 2)熟练掌握git的基本指令和分支管理指令: 实验内容: 1)安装git 2)初始配置git ,git ini ...

  3. 08.JS单词整理

    以下为按照文章顺序简单整理的JS单词, 注意:是JS单词注释,部分与英文不符 01.JS语法规范.变量与常量 console——控制台 log——日志 var——变量 variable变量,变化 co ...

  4. Linux部署.NetCore站点 使用Supervisor进行托管部署

    前言 之前终于在Linux上部署好了.NetCore站点,但是这个站点非常“脆弱”.当我的ssh连接关闭或者我想在当前连接执行其他命令时候就必须关闭dotnet站点的执行程序.这显然不是我想要达到的效 ...

  5. 避免XSS攻击

    遭遇XSS攻击怎么解决 XSS的攻击手段 利用JavaScript或DOM方式进行攻击,XSS(脚本注入)提交,然后进行页面展示,影响页面的正常结构,还可以做钓鱼网站,来盗取用户的信息. 比如在页面评 ...

  6. Python模块之Requests

    目录 Requests 模块 常规的get请求 基于ajax的get请求 常规的post请求 基于ajax的post请求 综合项目实战 requests模块高级 requests代理 验证码处理 Re ...

  7. Java实体对象为什么要实现Serializable接口?

    前言 Java实体对象为什么一定要实现Serializable接口呢?在学JavaSE的时候有些实体对象不实现Serializable不是也没什么影响吗? 最近在学习mybatis的时候发现,老师写的 ...

  8. MySQL Execute Plan--Index Merge特性

    Index Merge特性 在MySQL 5.5之前版本中,查询或子查询被限制在一个表只能使用一个索引(回表查询除外). 假设表TB1001上C1和C2列分别有单列索引,如对下面查询: SELECT ...

  9. ASP.NET Learning Center---学习ASP.NET(1)

    1,学习地址---微软官网 2,目标:学习Razor,以及建立Web应用. 3,https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/razor ...

  10. 基于90nm CMOS技术的功能齐全的64Mb DDR3 STT-MRAM

    自旋转矩磁阻随机存取存储器(ST-MRAM)有望成为一种快速,高密度的非易失性存储器,可以增强各种应用程序的性能,特别是在用作数据存储中的非易失性缓冲器时设备和系统.为此,everspin开发了基于9 ...