html5移动端适配;检测浏览器信息函数

html5移动端适配

//动态改变font-size大小
(function changeFontSize() {
   
    let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
    if (!isPC()) {
   
        let docEl = document.documentElement;
            // recalc = function () {
   
                let clientWidth = docEl.clientWidth;
                docEl.style.fontSize = 100 * (clientWidth / 375)  + 'px';
                let scaledFontSize = parseInt(window.getComputedStyle(docEl, null).getPropertyValue('font-size'));
                let scaleFactor = 100 * (clientWidth / 375) / scaledFontSize;
                let originRootFontSize = parseInt(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
                docEl.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';
            // };
    } else {
   
        let docEl = document.documentElement;
        docEl.style.fontSize = 'unset'
    }
    // if (!doc.addEventListener) return;
    window.addEventListener(resizeEvt, changeFontSize, false);
    document.addEventListener('DOMContentLoaded', changeFontSize, false);
})(document, window);

function isPC() {
   
    let userAgentInfo = navigator.userAgent;
    let Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
    let isPc = true;
    for (let i = 0;i< Agents.length; i++) {
   
        if (userAgentInfo.indexOf(Agents[i]) > 0) {
   
            isPc = false;
            break;
        }
    }
    if (document.documentElement.clientWidth <= 640) {
   
        isPc = false;
    }
    return isPc;
}

浏览器信息检测

//判断浏览器信息
function getNavigationInfo () {
   
    const ua = navigator.userAgent
    let browserInfo = {
   
        trident: ua.indexOf('Trident') > -1, // IE浏览器 trident内核
        presto: ua.indexOf('Presto') > -1, // opera浏览器 presto内核
        webKit: ua.indexOf('AppleWebKit') > -1, // chrome safari浏览器 webkit内核
        gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') == -1, //firefox浏览器 gecko内核
        mobile: !!ua.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
        ios: !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
        android: ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1, // android终端或UC浏览器
        iPad: ua.indexOf('iPad') > -1, //iPad终端
        webApp: ua.indexOf('Safari') == -1, //是否web应用程序,没有头部与底部
        openOnVchat: ua.toLowerCase().match(/MicroMessenger/i) == "MicroMessenger".toLowerCase(), // 在微信中打开
        openOnWeiBo: ua.toLowerCase().match(/WeiBo/i) == "Weibo".toLowerCase(), // 在新浪微博客户端打开
        openOnQQ: ua.toLowerCase().match(/QQ/i) == "QQ".toLowerCase(),// 在QQ端打开
    }
    return browserInfo;
}

文本可编辑

在文本标签上加上属性contenteditable=“true”

深拷贝对象

function deepClone(obj) {
   
  if (obj === null || typeof obj !== 'object') {
   
    return obj;
  }

  let clone = Array.isArray(obj) ? [] : {
   };

  for (let key in obj) {
   
    if (obj.hasOwnProperty(key)) {
   
      clone[key] = deepClone(obj[key]);
    }
  }

  return clone;
}

相关推荐

  1. html5移动检测浏览器信息函数

    2024-02-18 12:22:01       53 阅读
  2. 移动方案

    2024-02-18 12:22:01       35 阅读
  3. HTML 官网进行移动和 PC

    2024-02-18 12:22:01       18 阅读
  4. vue pc-移动-ipad

    2024-02-18 12:22:01       56 阅读
  5. 谈谈你是如何做移动的?

    2024-02-18 12:22:01       65 阅读
  6. WebApp 使用post-css实现移动

    2024-02-18 12:22:01       34 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-18 12:22:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-18 12:22:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-02-18 12:22:01       82 阅读
  4. Python语言-面向对象

    2024-02-18 12:22:01       91 阅读

热门阅读

  1. C语言系列9——动态内存分配与释放

    2024-02-18 12:22:01       56 阅读
  2. CCF编程能力等级认证GESP—C++4级—20231209

    2024-02-18 12:22:01       81 阅读
  3. ADO世界之SECOND

    2024-02-18 12:22:01       43 阅读
  4. RTC时钟

    RTC时钟

    2024-02-18 12:22:01      44 阅读
  5. 微信支付后台返回注意点

    2024-02-18 12:22:01       53 阅读
  6. 【C语言 学习记录】七、指针

    2024-02-18 12:22:01       50 阅读
  7. mysql宕机了怎么恢复数据

    2024-02-18 12:22:01       47 阅读