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
└─mobileabout_us.htmlindex.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端同样如此操作。

转载于:https://www.cnblogs.com/lixingwu/p/11439575.html

js -- 移动端pc端自动切换相关推荐

基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
flexible.js+rem解决pc端适配
第一步:新建 flexible.js文件这里默认是10等份,手动改为24,此时1rem=1920/24px即80px.(设计稿是1920px的) (function flexible(window, ...
php 可以做pc客户端吗,vue.js能做pc端吗
vue.js能做pc端,因为Vue是一套构建用户界面的渐进式框架,不管是用在PC端还是用在移动端,只要提供对应的API及数据相应就可以:但是PC端单页面对于搜索引擎可能不太友好,无法让搜索引擎把整个网 ...
淘宝flexible.js+rem适配pc端
1.引入flexible.js文件: (function flexible(window, document) {var docEl = document.documentElement;var dp ...
html播放flv直播源,如何使用flv.js直播（pc端）？
1.如何使用flv.js做直播(PC端)?网上的例子,包括官方上传到git上的都试过了,就是不能播出来. 2.这是我的demo flv.js demo Stream URL: Switch to Me ...
UC电脑端PC端浏览器下载，UC浏览器凉了？
近期从UC浏览器的官网找不到UC浏览器的PC端没有了而官网只有安卓端和iOS版本了阿里官方的客服也回复说暂时不考虑开发UC浏览器电脑端了百度贴吧也有感觉很可惜的感觉而今天给大家带来的就是UC浏 ...
多终端登录，只保留一个移动端+PC端同时在线
大家好,我是入错行的bug猫.(http://blog.csdn.net/qq_41399429,谢绝转载) 今天突然有小伙伴在群里问bug猫,多终端登录怎么搞. bug猫说,不知道百度的程序猿不是好 ...
Vue.js(十) element-ui PC端组件库
一:简介饿了么公司基于Vue开发了两套UI组件库,PC端组件库和移动端组件库. 一部分组件库是对原生的HTML标签元素的封装,增加了一些新的功能. 另一部分组件库是原生HTML标签元素没有的,是 ...
pc端html轮播带滑块,原生js实现移动端+pc端轮播插件
slide.js 原生js写的轮播兼容 pc+移动端插件,支持轮播速度,轮播内容,轮播间隔,手势灵敏度自定义,导航圆点点击跳转,手势滑动. 使用说明:slide.js文件包含小部分es6语法编写的文 ...

js -- 移动端pc端自动切换

1. 判断浏览器类型

2. 根据浏览器跳转到对应的页面

js -- 移动端pc端自动切换相关推荐

最新文章

热门文章