vue移动端H5适配方案-动态生成viewport适配方式

废话不多说，直接上代码

js代码

<script>
  (function(){
    let targetW = 375;
    let set = function () {
      let w = window.screen.width;
      let scale = w/targetW; //当前尺寸/目标尺寸
      let meta = document.createElement("meta");
      meta.name = "viewport";
      meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
      console.log(scale);
      document.head.appendChild(meta);
    }
    set();
    window.addEventListener('resize', set);
  })();
</script>

vue页面代码 

<template>
    <div>
      <div>动态生成viewport</div>
      <el-input class="my-input" v-model="name" placeholder="Please input" />
      <div class="shop-item">
        <div class="tag">
          06:15 10:00 <span class="tag-tip">开售</span>
        </div>
      </div>
      <el-button class="font20" type="primary" @click="submit">测1221试</el-button>
    </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const name = ref("阿斯顿");
const submit = () => {
    name.value = "submit 测试按钮";
};
const nameRef = ref(null);
onMounted(() => {
    console.dir(nameRef.value);
});
</script>
<style lang="scss" scoped>
.my-input {
  font-size: 12px;
  width: 340px;
  height: 24px;
  margin: 20px auto;
  display: flex;
  justify-content: center;
}
.shop-item{
  width: 347px;
  height: 347px;
  background-color: #757171;
  margin: 20px auto;
  position: relative;

  .tag{
    position: absolute;
    left: 0;
    top: 20px;
    width: 123px;
    height: 22px;
    line-height: 22px;
    background-color: #409eff;
    border-radius: 0 10px 10px 0;
    font-size: 14px;

    display: flex;
    justify-content: center;

    .tag-tip{
      font-size: 8px;
      padding-left: 5px;
    }
  }
}
</style>