原生js H5适配它来了 保姆级教学

简介: 原生js H5适配它来了 保姆级教学

废话不说,上代码

js核心代码

1.这里面的所有750改为设计图的大小

2.不改也可以,吧设计图大小改为750

也就是手机屏想象成宽度750rem

我的方法:

       1.把psd设计图文件上传到蓝湖 然后尺寸改为750

218c04b3b51146f7a139dfce93a58b46.jpg      

然后都用布局

设计图大小给多少就是多少 例如

f47a504895074872b908916d9ddc2274.jpg

 

//重点 重点 重点
function AutoPage() {
  document.documentElement.style.fontSize =
    (document.documentElement.clientWidth * 100) / 750 + "px";
  setFontSize();
}
AutoPage();
window.addEventListener("resize", AutoPage, false);
if ($(window).width() > 750) {
  document.documentElement.style.fontSize = 97.6389 + "px";
}
function setFontSize() {
  var clientWidth = document.documentElement.clientWidth,
    timer;
  console.log(clientWidth);
  if (!clientWidth) return;
  document.documentElement.style.fontSize =
    (document.documentElement.clientWidth * 100) / 750 + "px";
  if (
    window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize
  ) {
    var size = window
      .getComputedStyle(document.getElementsByTagName("html")[0])
      .fontSize.split("p")[0];
    if (size * 1.2 < (document.documentElement.clientWidth * 100) / 750) {
      document.documentElement.style.fontSize =
        (1.25 * document.documentElement.clientWidth * 100) / 750 + "px";
    }
    console.log(document.documentElement.style.fontSize);
  }
}
//附加代码 可写可不写
//Android微信中,借助WeixinJSBridge对象来阻止字体大小调整
(function () {
  if (
    typeof WeixinJSBridge == "object" &&
    typeof WeixinJSBridge.invoke == "function"
  ) {
    handleFontSize();
  } else {
    if (document.addEventListener) {
      document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    } else if (document.attachEvent) {
      //IE浏览器,非W3C规范
      document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
    }
  }
  function handleFontSize() {
    // 设置网页字体为默认大小
    WeixinJSBridge.invoke("setFontSizeCallback", {
      fontSize: 0,
    });
    // 重写设置网页字体大小的事件
    WeixinJSBridge.on("menu:setfont", function () {
      WeixinJSBridge.invoke("setFontSizeCallback", {
        fontSize: 0,
      });
    });
  }
})();

附加代码可写可不写

/* ios兼容微信字体变大,页面错乱问题 */
body {
    /*重要 ios兼容微信字体变大,页面错乱问题 */
  -webkit-text-size-adjust: 100% !important;
    /*不重要*/
  background-color: #ffffff;
  background-image: url(../imges/dots.png);
  background-repeat: repeat;
}
相关文章
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
45 0
|
4月前
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
3月前
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
52 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
4月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
44 0
|
4月前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
43 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的教学仪器设备销售网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的教学仪器设备销售网站附带文章源码部署视频讲解等
40 1
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学多媒体教学管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学多媒体教学管理系统附带文章源码部署视频讲解等
38 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的教学演示系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的教学演示系统附带文章源码部署视频讲解等
43 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的槐荫中学教学管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的槐荫中学教学管理系统附带文章源码部署视频讲解等
26 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的高校院系教学实施管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的高校院系教学实施管理系统附带文章源码部署视频讲解等
25 0