原生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;
}
相关文章
|
10天前
|
移动开发 JavaScript 前端开发
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
这篇文章介绍了在UniApp H5项目中处理跨域问题的两种方法:通过修改manifest.json文件配置h5设置,或在项目根目录创建vue.config.js文件进行代理配置,并提供了具体的配置代码示例。
UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)
|
7天前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
15 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的教学仪器设备销售网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的教学仪器设备销售网站附带文章源码部署视频讲解等
29 1
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学多媒体教学管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学多媒体教学管理系统附带文章源码部署视频讲解等
27 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的教学演示系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的教学演示系统附带文章源码部署视频讲解等
13 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的槐荫中学教学管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的槐荫中学教学管理系统附带文章源码部署视频讲解等
14 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的高校院系教学实施管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的高校院系教学实施管理系统附带文章源码部署视频讲解等
16 0
|
2月前
|
前端开发
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
大屏自适应/适配方案【详解】(echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem)
254 0
|
2月前
|
移动开发 JavaScript
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
67 0
|
2月前
|
JavaScript
js 一键复制到剪贴板(原生js实现)
js 一键复制到剪贴板(原生js实现)
19 0
下一篇
DDNS