首页 > 其他分享 >js判断是移动端还是手机端来切换css从而达到适配的目的

js判断是移动端还是手机端来切换css从而达到适配的目的

时间:2023-06-21 14:25:10浏览次数:43  
标签:head 适配 loadCSS js stylesheet link var css

function loadCSS(url) {
    // Remove existing stylesheets
    var head = document.head;
    var existingStylesheets = head.getElementsByTagName('link');
    for (var i = existingStylesheets.length - 1; i >= 0; i--) {
      var stylesheet = existingStylesheets[i];
      if (stylesheet.rel === 'stylesheet') {
        head.removeChild(stylesheet);
      }
    }
  
    // Create new stylesheet
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
  
    // Append the new stylesheet to the head
    document.head.appendChild(link);
    console.log(link)
  }
  
 

  


// 判断是否为移动设备
function isMobileDevice() {
    return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
  }
  

  
  if (isMobileDevice()) {
    // 执行手机端逻辑
    console.log("This is a mobile device.");
	loadCSS('./css/index.css');

  } else {
    // 执行电脑端逻辑
    console.log("This is a desktop device.");
    //  loadCSS('file:///D:/txt/css/index2.css');
	 loadCSS('./css/index2.css');
  }

isMobileDevice();

标签:head,适配,loadCSS,js,stylesheet,link,var,css
From: https://www.cnblogs.com/xxdmua/p/17496097.html

相关文章

  • 直播开发app,css 自定义滚动条样式
    直播开发app,css自定义滚动条样式<divclass="content-wrap">  <div>    内容XXXX  </div> </div>  <style> //content-wrap样式.content-wrap{  flex:1;  overflow-y:scroll;  box-sizing:border-box;  padding:010px;  ......
  • JSON.stringify()和JSON.parse()的区别(和toString())
    1.JSON.stringify()是把javascript对象转换成json字符串,JSON.parse()是把字符串转换成对象,toString可以把数组变成字符串                          toString()方法主要见:https://www.w3school.com.cn/jsref/jsref_tostring......
  • JSONModel的使用
    这个lib非常好用,专门用来解析json的,当你解析json的时候,只需要写出要解析的对象的头文件就好了,不需要self.id=[jsonDictobjectForKey:@"id"];self.name=[jsonDictobjectForKey:@"name"];self.profileImageBig=[jsonDictobjectForKey:@"profile_image_big"];self.profil......
  • find-my-way nodejs 快速的http 路由框架
    find-my-way基于了radixtree开发的路由框架,支持路由参数,通配符,同时语言无关fastify以及restify都使用了路由框架,同时也受echo启发说明了解find-my-way的使用以及内部机制对于学习fastify是比较有用的,fastify不少有意思的插件机制都利用了find-my-way参考资料https://g......
  • 关于NotePad++打开json文件并以树形方式展示
    NotePad++打开json文件并以树形方式展示为了更好查看和分析数据,需要将json数据展开去洞察数据规律,通常如果仅仅简单使用文本工具打开json文件,并不能很友好地观察出数据内容和规律,更不要说比较复杂的多层级的字典内容,因此需要以树形结构更好的观察json数据。为了更加清晰地说明问......
  • js如何操作video标签
    一.简介在做webui自动化时,遇到操作视频的时候有时比较让人头疼,定位时会发现只有一个<video>标签,用selenium来实现的话比较麻烦,使用js后我们只需定位到video标签,然后通过js中处理video的相关属性和方法就可实现,我们继续往下看。二.实例用法1.获取视频的总时长(duration)#doc......
  • 前端JS zip打包文件并下载,图片url转base64
    使用jszip这个项目实现的:https://github.com/Stuk/jszipFileSaver.js项目地址是:https://github.com/eligrey/FileSaver.js/<scriptsrc="./FileSaver.min.js"></script><scriptsrc="./jszip.min.js"></script>//初始化一个zip打包对象varzi......
  • js 数组 map方法
    一、map的第一种使用场景需求:我们想得到对象数组中指定的两组或多组key和value值。如下图:下面是一段JSON数据结构{"code":0,"msg":null,"data":[{"processDetailId":1381753495314433,"processId":138175349......
  • umijs
    企业级前端框架UMI3官网开篇词开篇词|react官方架构单薄,同事们都在用UMIUmi是蚂蚁金服的底层前端框架,是可扩展的企业级前端应用框架,内置了路由、构建、部署、测试,包含组件打包、文档工具、请求库、hooks库、数据流等,通过框架的方式简化React开发知识结构图UMI......
  • java-http携带json参数访问接口
    一个接收map的接口@RequestMapping("kkw")publicStringkkw(@RequestBodyMap<String,Object>map){if(map!=null){System.out.println(JSONObject.toJSONString(map));;}return"success";}pac......