关于适老化的以下方法 h5

关于h5适老化的一些方案

一,第一种，即使用两套ui，反映到开发上，其基本思路就是动态切换css样式，

具体实现是这样的
以下是组件内的样式写法

// 正常样式
.page {
  width: 100%;
  min-height: 100vh;
  background-color: var(--bg-color);`在这里插入代码片`
  div.topbg {
    width: 100%;
    height: 19rem;
    background-image: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.5) 100%
      ),
      url('../../assets/images/customizenowcreateTop.png');
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 50%, 100% 100%;
    background-position: 0 100%, 0 0;
    text-align: center;
    padding-top: 6.7rem;
   

  .submit-btn {
    ::v-deep .buy-now {
      position: relative;
      top: 0;
      left: 1.6rem;
    }
  }
  .record {
    width: 100%;
    height: 5rem;
    font-size: 1.4rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #206d73;
    text-align: center;
    padding: 2rem 0 3rem;
    &::after {
      content: '';
      display: inline-block;
      width: 0.7rem;
      height: 0.7rem;
      border: 1px solid #206d73;
      border-top: 0;
      border-left: 0;
      transform: rotate(-45deg);
      margin-left: -0.3rem;
    }
  }
}
//适老化版本样式      注意：此处的样式可能无法生效，主要原因呢就是 样式优先级不太够 第一：推荐提高样式优先级来解决。第二：就是使用!important关键字来提高优先级实现。
.elder {
  .page {
    div.from {
      ::v-deep .van-field__body {
        textarea::-webkit-input-placeholder,
        input::-webkit-input-placeholder {
          font-size: 1.8rem !important;
        }
        textarea,
        input {
          font-size: 1.8rem !important;
        }
      }
    }
  }
}

以下是动态切换根元素的类名以实现切换样式的功能 ， 以下代码 在 vue中直接写入 index.html 文件中即可
主要作用就是切换类名

case 'elder':   // 老年模式
              var html = document.querySelector('html')
              html.setAttribute('class', 'elder')
              sessionStorage.setItem('usertype', 'elder')
          
              break;
            default:  // 正常模式 
              console.log('default');
              sessionStorage.setItem('usertype', 'normal')

总结以下： 两套ui的做法比较细致，如果项目设计了两套ui，就使用这种方式即可。 适老化效果最好，前端任务较重。 开发要骂的……

第二种，

首先说明一下，如果当前项目只考虑，文本的样式，即有硬性要求，文本大小不得小于18px。 而ui样式，无过多要求，布局不会混乱即可。
可以使用以下做法，
基本思路就是，遍历页面的所有节点，获取全部文本节点的大小，小于18px的直接设置为18px，大于的也可以根据情况处理

function htmlTextChange (dv1) {   // dv1 :  要遍历的元素，方法会遍历，内部是全部子元素，后代元素
      for (let index = 0; index < dv1.childNodes.length; index++) {
        if (dv1.childNodes[index].nodeName == '#text') {// 得到所有文本节点
          let thisFontSize = parseInt(window.getComputedStyle(dv1, null).getPropertyValue('font-size'))  // 获取文本节点的大小
          if (thisFontSize < 18) {  // 对于小于18px的文本节点做处理
            dv1.style.fontSize = '18px'   // 注意： 当节点设置过  !important  该处就会失效。 
          }
        } else if (dv1.childNodes[index].nodeType == 1 && dv1.childNodes[index].childNodes) {
          htmlTextChange(dv1.childNodes[index])   // 递归调用，如果有子元素继续处理
        }
      }
    }

然后，该方法怎么在组件中使用， 以下演示vue2中的使用，
本人采用的是mixin混入的方式，由于每个组件都需要适配，故这样做了，有更优方法可留言探讨
以下代码是 mixin 文件

var fontSize = {
  created: function () {
    this.$nextTick(() => {  // 需要操作dom 故写在这里
      if (!(sessionStorage.getItem('usertype') === 'elder')) {  // 不是适老化模式，无需处理
        return
      }
      this.htmlTextChange (this.$el)  // 适老化模式，调用方法处理    this.$el:表示当前组件的根元素的dom
    })
  },
  updated () {   // 由于组件 数据大多是动态的，因此更新之后依然需要适配  逻辑同初始化
    // console.log('app更新');
    this.$nextTick(() => {
      // console.log('获取更新之后的页面');
      if (!(sessionStorage.getItem('usertype') === 'elder')) {
        return
      }
      // console.log(this.$el);
      this.htmlTextChange (this.$el)
    })
  },
  mounted () {  // 注意此处由于，我本身的vue 和html文件的 数据，无法实现实时通讯，以及执行顺序的问题，故使用这种很原始的定时器做的处理 作用：就是获取当前的 模式： 适老化还是普通模式。   如你可以保证 mixin运行即可以立即获取，改代码 可以忽略
    let timer = null
    timer = setInterval(() => {
      if (sessionStorage.getItem('usertype') === 'elder') {
        clearInterval(timer)
        timer = null
        this.htmlTextChange (this.$el)
      }
      if (sessionStorage.getItem('usertype')) {
        clearInterval(timer)
        timer = null
      }
    }, 100);
  },
  methods: {
    htmlTextChange (dv1) {  // 该方法已经介绍过了，不在过多赘述
      for (let index = 0; index < dv1.childNodes.length; index++) {
        if (dv1.childNodes[index].nodeName == '#text') {// 得到所有文本节点
          let thisFontSize = parseInt(window.getComputedStyle(dv1, null).getPropertyValue('font-size'))
          if (thisFontSize < 18) {
            dv1.style.fontSize = '18px'
          }
        } else if (dv1.childNodes[index].nodeType == 1 && dv1.childNodes[index].childNodes) {
          this.htmlTextChange (dv1.childNodes[index])
        }
      }
    }
  },
}
export default fontSize

接着就是使用mixin了，
以下代码在vue组件中即可 需要适配的组件，要全部引入
PS 当然你也可以选择全局引入 mixin

import FontSize from "@/Mixin";  // 引入
export default {
  mixins: [FontSize], // 注册
  }

总结该方法，足以满足全部字体均是18px的要求。
通常需要结合，第一种同时使用，因为，部分样式，会固定宽度，或者 高度，导致字体超出，或者布局错乱，需要使用第一种方法进行单独设置。

第三种

如果你的项目采用的是rem的适配方案，其实还有个方法就是，你直接改变根元素的大小，但是，例如，当前
html {
font-size：12px}

你直接改为
html {
font-size：14px}

这样做整个页面全部内容都会有放大的效果， 当然是使用动态类名处理的。

但是会有个问题例如，
当前是正常的效果 即
根元素大小是 2.666666vw 375px 尺寸下就是 12px

然后，基准改一下
3.74vw 渲染之后 是 约等于 14px

结果就成了这样了。
解决方法就是，不要给固定宽度，边距用外边距。内部还要注意不能超出才行