移动端用户设置字体大小导致适配失败(vue)

最新推荐文章于 2024-08-03 09:44:46 发布

DuBanL

最新推荐文章于 2024-08-03 09:44:46 发布

阅读量823

点赞数

分类专栏： vue H5 移动端文章标签： vue android ios

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

版权

本文主要讨论了在移动端使用Vue开发时遇到的用户自定义字体大小导致的适配问题，分别提供了针对安卓和iOS端的处理方案，并邀请读者分享更好的方法。

摘要由CSDN通过智能技术生成

一安卓端处理方式

在这里插入图片描述
在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'
        docume