js -- 移动端pc端自动切换
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端自动切换的更多相关文章
- js 设备判断(移动端pc端 安卓ios 微信)
苹果安卓判断 $(function () { var u = navigator.userAgent, app = navigator.appVersion; var isAndroid = u.in ...
- js实现禁止pc端浏览器缩放和获取当前页面浏览器的缩放大小
众所周知:移动端页面禁止用户缩放界面只需加上<meta name="viewport" content="user-scalable=0">即可,但 ...
- js判断是pc端还是移动端
function checkMobile() { var pda_user_agent_list = new Array("2.0 MMP", "240320" ...
- 移动端&PC端CSS样式兼容代码
CSS样式兼容代码 1.禁止选中复制文本 *{ user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-us ...
- REM布局计算,移动端,pc端有兼容性)
rem布局计算(移动端,pc端有兼容性) <!DOCTYPE html> <html> <head lang="en"> <script& ...
- Charles如何抓取https请求-移动端+PC端
Charles安装完成,默认只能抓取到http请求,如果查看https请求,会显示unkonw或其它之类的响应.所以需要先进行一些配置,才能抓取到完整的https请求信息.下面针对PC端和手机端抓包的 ...
- JS手机访问PC端网站自动跳转到手机端网站
<script type="text/javascript"> //移动端url跳转,自定义部分开始 function mobile_device_detect(url ...
- js判断是否pc端
function IsPC() { var userAgentInfo = navigator.userAgent; var Agents = ['Android', 'iPhone', 'Symbi ...
- js轮播功能 标签自动切换 同页面多轮播js
需要加入jquery 1.43及以上版本 下面还有个简单版,一个页面只支持一个轮播 同页面多轮播js <div> <div class="yt_content"& ...
随机推荐
- Linux Shell 计算脚本执行过程用了多长时间
#!/bin/bash starttime=`date +'%Y-%m-%d %H:%M:%S'` #执行程序 endtime=`date +'%Y-%m-%d %H:%M:%S'`start_sec ...
- 获取tensorflow中变量的值
names=[i.name for i in tf.all_variables()]for i in names: print i ker=tf.get_default_graph().get_ten ...
- Java的七大排序
一.各个算法的时间复杂度 二,具体实现 1.直接选择排序 基本思想:在长度为n的序列中,第一次遍历找到该序列的最小值,替换掉第一个元素,接着从第二个元素开始遍历,找到剩余序列中的最小值,替换掉第二个元 ...
- cookie的设置与取值
设置cookie function cookie(key, value, options) { let days let time let result // A key and value were ...
- 百度架构师带你进阶高级JAVA架构,让你快速从代码开发者成长为系统架构者
百度架构师带你进阶高级JAVA架构,让你快速从代码开发者成长为系统架构者 1.
- ThreadPool(线程池)介绍
>>返回<C# 并发编程> 1. 线程池的由来 1.1. 线程池出现前 1.2. 线程池的诞生 1.3. CLR线程池工作过程 2. 线程池解决的问题 2.1. 异步调用方法 ...
- PLSQL-Initialization error
1. 情况描述 安装完PLSQL之后,在写入数据库连接信息后,连接数据库,报Initialization error错误 (1)未安装Oracle数据库,无相应的oci.dll文件 (2)已安装数据库 ...
- [Contract] public、external, private、internal 在 Solidity 中如何选择
合约内部访问的用 private,修饰内部变量时选择.通过 external 函数返回. 合约内部.外部均可访问的用 public. 仅在合约外部访问的用 external,明确暴露给前端使用时选择. ...
- HTML表单概念、语法及创建表单,案例
form 标签 Input标签的type属性值 单行文本域 <input type="text" /> 图像域(图像提交按钮) 下拉菜单和列表标签 select 标签属 ...
- 洛谷P4526 【模板】自适应辛普森法2
P4526 [模板]自适应辛普森法2 洛谷传送门 题目描述 计算积分 保留至小数点后5位.若积分发散,请输出"orz". 输入格式 一行,包含一个实数,为a的值 输出格式 一行,积 ...