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. 在线使用iconfont字体图标

    登录https://www.iconfont.cn 把需要的图标加入购物车,然后加入项目 打开我的项目,生成代码 有3中方式使用图标 unicode和font class本质都是使用字体,好处在于兼容 ...

  2. leetcode-简单-栈-逆波兰表达式

    根据逆波兰表示法,求表达式的值. 有效的运算符包括 +, -, *, / .每个运算对象可以是整数,也可以是另一个逆波兰表达式. 说明:  整数除法只保留整数部分. 给定逆波兰表达式总是有效的.换句话 ...

  3. EF CORE中复杂类型的映射

    实体映射时,遇到复杂类型,可选择下述方法处理: NotMapped,跳过映射 在复杂类型上声明 [Owned],但仅限该复杂类型是全部由简单值类型组成的 自定义序列化方法   示例: IPInfo使用 ...

  4. XAML 字符转义

    在 写xaml的使用遇到了一些特殊字符,这里记录一下特殊字符转义.  这些特殊字符遵循用于编码的万维网联合会(W3C) XML 标准. 下表显示这组特殊字符的编码语法: 字符 语法 描述 < & ...

  5. 显示层封装及实现与优化(无动画+css3动画+js动画)

    showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  6. python基础练习,循环、列表、字典、数组

    # encoding: utf-8 ''' @author: mark @file: 20200214.py @time: 2020/2/14 14:21 @software: PyCharm ''' ...

  7. Gin框架之参数绑定

    为了能够更方便的获取请求相关参数,提高开发效率,我们可以基于请求的Content-Type识别请求数据类型并利用反射机制自动提取请求中QueryString.form表单.JSON.XML等参数到结构 ...

  8. IntelliJ IDEA 更新

    一. 下载最新版本的idea 1. 官网下载,官网地址:http://www.jetbrains.com/idea/download/#section=windows 2. 百度网盘直接下载:http ...

  9. Scheduled和HttpClient的连环坑

    首页 > JAVA > @Scheduled和HttpClient的连环坑 @Scheduled和HttpClient的连环坑 2018-03-22 曾经踩过一个大坑: 由于业务特殊性,会 ...

  10. 全面了解Java中的15种锁概念及机制!

    在读很多并发文章中,会提及各种各样锁如公平锁,乐观锁等等,这篇文章介绍各种锁的分类.介绍的内容如下: 1.公平锁 / 非公平锁 2.可重入锁 / 不可重入锁 3.独享锁 / 共享锁 4.互斥锁 / 读 ...