zoukankan      html  css  js  c++  java
  • 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端同样如此操作。

  • 相关阅读:
    基督山伯爵---大仲马
    数据结构
    11. 标准库浏览 – Part II
    python 标准库
    Python 官方文件
    Python 函数
    学员名片管理系统
    如何进入多级菜单
    Python 文件操作
    Python 字符串 (isdigit, isalnum,isnumeric)转
  • 原文地址:https://www.cnblogs.com/lixingwu/p/11439575.html
Copyright © 2011-2022 走看看