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. pikachu-远程代码、命令执行漏洞(RCE)

    一.RCE概述 1.1 什么是RCE? RCE漏洞,可以让攻击者直接向后台服务器远程注入操作系统命令或者代码,从而控制后台系统. 1.2 远程系统命令执行 一般出现这种漏洞,是因为应用系统从设计上需要 ...

  2. 利用Graphics的截图功能CopyFromScreen

    该方式是直接对屏幕进行截图操作 UserControl chartContainPanel = new UserControl(); Graphics graph = chartContainPane ...

  3. C# 四则运算及省市选择及日月选择

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  4. ES6 - 基础学习(3): 变量的解构赋值

    解构赋值概述 1.解构赋值是对赋值运算符的扩展. 2.它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值. 3.代码书写上显得简洁且易读,语义更加清晰明了:而且还方便获取复杂对象中的数据字 ...

  5. linux中shell内置命令和外置命令

    shell内置命令 无法通过which或者whereis去查找命令的位置 例如cd,cp这些命令是shell解释器内置的命令 当shell内置命令传入shell解释器,shell解释器通过内核获取相关 ...

  6. 从零开始一个个人博客 by asp.net core and angular(二)

    上一篇帖子讲了用了哪些技术,这个帖子就先介绍介绍api项目吧,项目就是一个普通的webapi项目,账户系统用的identity ,什么是identity呢? 其实就是官方封装好的一系列的可以用来操作数 ...

  7. 小白的linux笔记8:linux自动运行爬虫并发送提醒邮件

    有了成功运行的爬虫后,希望能每天定时运行,且遇到错误时能及时发出提醒. 发出提醒 可以用mailx发出邮件做提醒.没有的话先安装Yum install mailx. 以qq邮箱为例,需要设置/etc/ ...

  8. Qt编写的项目作品1-自定义控件大全

    一.功能特点 超过160个精美控件,涵盖了各种仪表盘.进度条.进度球.指南针.曲线图.标尺.温度计.导航条.导航栏,flatui.高亮按钮.滑动选择器.农历等.远超qwt集成的控件数量. 每个类都可以 ...

  9. Spring cloud微服务安全实战 最新完整教程

    课程资料获取链接:点击这里 采用流行的微服务架构开发,应用程序访问安全将会面临更多更复杂的挑战,尤其是开发者最关心的三大问题:认证授权.可用性.可视化.本课程从简单的API安全入手,过渡到复杂的微服务 ...

  10. 【IDE】IDEA - 使用问题记录

    1.显示方法API:类似eclipse把鼠标放到方法上有api信息. setting/keymap中搜索 quick docs:(有说默认快捷键是ctrl+q,但我的不是待查找快捷键) 2.forea ...