移动端用户设置字体大小导致适配失败(vue)_ios和安卓最小字体兼容问题处理 vue_DuBanL的博客-程序员秘密

一安卓端处理方式

在这里插入图片描述
在app.vue里面加入以下代码

mounted () {
    // remFN()
    (function (doc, win) {
      var remFull = 3.75 // 3.75rem全屏
      var docEl = doc.documentElement
      var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
      var recalc = function () {
        var clientWidth = docEl.clientWidth
        if (!clientWidth) return;

        var fontSize = clientWidth / (remFull * 100) * 100
        docEl.style.fontSize = fontSize + 'px'

        var eDivWidth = 0
        var eDiv = document.createElement('div')

        eDiv.style.width = remFull + 'rem'
        eDiv.style.height = '1px'
        eDiv.style.position = 'fixed'
        eDiv.style.boxSizing = 'border-box'
        document.body.appendChild(eDiv)
        eDivWidth = eDiv.clientWidth
        // eDivWidth = 375
        if (clientWidth !== eDivWidth) {
          var timer = setInterval((function () {
            clientWidth = docEl.clientWidth
            eDivWidth = eDiv.clientWidth
            if (clientWidth !== eDivWidth) {
              docEl.style.fontSize = fontSize * (clientWidth / eDivWidth) + 'px'
              console.log('111111111111111111111',docEl.style.fontSize)
            } else {
              clearInterval(timer)
              document.body.removeChild(eDiv)
            }
            return arguments.caller
          })(), 100)
        } else {
          document.body.removeChild(eDiv)
        }
      };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false)
      doc.addEventListener('DOMContentLoaded', recalc, false)
    })(document, window);
  },

二 iOS端处理方式

在这里插入图片描述

-webkit-text-size-adjust: 100% !important;

备注：亲测有用有问题或者更好的处理方式请留言谢谢

本文链接：https://blog.csdn.net/DuBanL/article/details/112310261

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

13-驱动设备分离之平台驱动简单实例_夏夜晚风_的博客-程序员秘密

文章目录1. 平台驱动1.1 平台驱动相关结构体1.2 平台驱动相关函数2. 平台设备2.1 平台设备相关结构体2.2 平台设备相关函数3. 示例代码3.1 drv.c3.2 dev.c3.3 makefile3.4 测试结果在前面的学习中，例如LED的驱动中都是直接把LED相关的硬件部分写入到驱动的代码中，如果硬件有改动的时候就要重新修改驱动的代码，这样的驱动通用性很差。为此，接下来我们学习...

表达式的计算（后缀表达式的求解）_算术表达式的后缀式怎么算_yuzhang_zy的博客-程序员秘密

1. 问题网址：http://lx.lanqiao.cn/problem.page?gpid=T419问题描述：问题描述　　输入一个只包含加减乖除和括号的合法表达式，求表达式的值。其中除表示整除输入格式　　输入一行，包含一个表达式输出格式　　输出这个表达式的值样例输入1-2+3*(4-5)样例输出-4数据规模和约定　　表达式长度不超过100，...

因果一致性在分布式系统（微信朋友圈）中的应用的理解_KD_的博客-程序员秘密

https://www.cnblogs.com/king0101/p/11908305.html上文中所描述的微信朋友圈评论同步问题，可看作多主复制数据库中的因果一致性问题。对于数据库中的某一条朋友圈（由唯一key标识），其value对应多条评论。朋友圈由多主复制数据库进行存储，四个数据中心中均存在朋友圈的主库，均提供写入功能。问题：假设用户A在数据中心1进行对朋友圈进行评论a，数据中心1将此条评论异步复制到数据中心2和数据中心3。当数据中心2接收到此评论后，用户B查看到评论a进行回复评论b...

Centos Nodejs_weixin_33801856的博客-程序员秘密

设置Nodejs环境第二节：Installing Node.js, PM2 and Yarn on CentOShttps://www.youtube.com/watch?v=XCgCjasqEFo&list=PLQlWzK5tU-gDyxC1JTpyC2avvJlt3hrIh&index=2官司方网站：https://nodejs.org/en/选择其他下...

Camtasia | An error occurred in the Recorde System Audio setup Failed_代野的博客-程序员秘密

版本说明：Camtasia Studio 8.5.1Win10 x64家庭版在使用Camtasia Studio时，开始录屏后会弹出下图所示：解决方案：如果包含下边这些程序中的任意一个，删除即可（控制面板-->程序卸载），ASUS Sonic Suite, ASUS Sonic Studio, ASUS Soni...

linux 目录拷贝程序实现_适千里的博客-程序员秘密

目录拷贝程序思路：一、验证参数目录拷贝程序参数必定包含源目录路径和目标位置二、调用函数执行源目录到目标位置的拷贝三、在目标路径创建被拷贝目录的最顶层位置四、递归遍历目录a. 对于目录中的子目录，更改源目录和目标位置，调用函数执行拷贝b. 对于目录中的文件，执行文件拷贝目录拷贝程序实现：#include#include#include#include