微信小程序web-view加载网页字体非常小的问题

cwr888

已于 2022-07-12 20:10:16 修改

阅读量2.7k

点赞数

分类专栏：小程序 html5 JavaScript 文章标签：前端

于 2022-07-12 16:30:37 首次发布

本文链接：https://blog.csdn.net/cwr888/article/details/125746001

版权

JavaScript 同时被 3 个专栏收录

23 篇文章

订阅专栏

html5

10 篇文章

订阅专栏

小程序

2 篇文章

订阅专栏

一、问题如下图所示，微信小程序web-view加载网页的字体非常小：

二、问题解决，在网页中加上

<meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

三、解决后效果如下：

网页测试代码如下：

<!DOCTYPE html>
<html>
<head>
  <!--<meta charset="utf-8">各种兼容模式代码示例如下：

  1.<meta http-equiv="X-UA-Compatible" content="IE=5" />

  像是使用了 Windows Internet Explorer 7 的 Quirks 模式，这与 Windows Internet Explorer 5 显示内容的方式很相似。
  

2.<meta http-equiv="X-UA-Compatible" content="IE=7" />

  无论页面是否包含 <!DOCTYPE> 指令，均使用 Windows Internet Explorer 7 的标准渲染模式。
  

3.<meta http-equiv="X-UA-Compatible" content="IE=8" />
  
开启 IE8 的标准渲染模式，但由于本身 X-UA-Compatible 文件头仅支持 IE8 以上版本，因此等同于冗余代码。
  

4.<meta http-equiv="X-UA-Compatible" content="edge" />
  
Edge 模式通知 Windows Internet Explorer 以最高级别的可用模式显示内容，这实际上破坏了“锁定”模式。即如果你有IE9的话说明你有IE789，那么就调用高版本的那个也就是IE9。


  5.<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >


  如果IE有安装Google Chrome Frame，那么就走安装的组件，如果没有就和一样。

说明：针对IE 6，7，8等版本的浏览器插件Google Chrome Frame，可以让用户的浏览器外观依然是IE的菜单和界面，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核。


  6.<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

  EmulateIE7 模式通知 Windows Internet Explorer 使用 <!DOCTYPE> 指令确定如何呈现内容。标准模式指令以Windows Internet Explorer 7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。与 IE7 模式不同，EmulateIE7 模式遵循 <!DOCTYPE> 指令。对于多数网站来说，它是首选的兼容性模式。-->
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <!--移动端和pc端不同。现在手机屏幕分辨率越来越高，但屏幕大小并没有太大的变化，这意味着每个物理像素里装了多个实际像素。
  

还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。
  

所以在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，我们可以将页面的宽度固定，然后获取设备的宽度，可以得到我们之前设定的宽度与设备宽度的比例，再使用HTML5新增的viewport来对页面进行缩放，并固定不允许用户再重新缩放。
  下面的width=device-width, initial-scale=1, maximum-scale=1定义了页面宽度为设别宽度，缩放比例为1也就是没有缩放，最大缩放值也是1倍。initial-scale=1 解决了 iphone、ipad的毛病，width=device-width则解决了IE的毛病-->
  <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>网页标题</title>
  <script>
    // 以下代码思路来源网络。同时代码放在 body 标签开头位置效果最佳
    //var $dom = document.createElement('div');
    //$dom.style = 'font-size: 10px';
    //document.body.appendChild($dom);

    // 计算出放大后的字体
    //var scaledFontSize = parseInt(window.getComputedStyle($dom, null).getPropertyValue('font-size'));
    //document.body.appendChild($dom);

    // 计算原字体和放大后字体的比例
    //var scaleFactor = 10 / scaledFontSize;

    // 取 html 元素的字体大小
    //var originRootFontSize = parseInt(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));

    // 由于设置 font-size 后实际会变大，故 font-size 需设置为更小一级
    //document.documentElement.style.fontSize = originRootFontSize * scaleFactor * scaleFactor + 'px';


    //(function(doc, win) {
    //  var docEl = doc.documentElement,
    //  resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    //  recalc = function() {
    //    var clientWidth = docEl.clientWidth;
    //    if (!clientWidth) return;
    //    docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
    //  };
    //  if (!doc.addEventListener) return;
    //  win.addEventListener(resizeEvt, recalc, false);
    //  doc.addEventListener('DOMContentLoaded', recalc, false);
    //})(document, window)


    // 当前假如当前分辨率是375， 设计稿分辨率是750

    // 750/375=0.5

    // 比例关系是0.5倍

    // 再算一下你要换算1rem等于多少px，

    // 假如我要100， 100/16=6.25

    // 把这个换算的乘以刚才得出的比例

    // 0.5*625=312.5

    // 最后还拼接了一个百分号 = 312.5%

    // 就是在375分辨率下 1rem = 312.5%

    // 312.5% * 16px = 50px
    //(function(){

    //     var currClientWidth,

    //         fontValue,

    //         originWidth;

    //     originWidth = 750;//ui设计稿的宽度，一般750或640

    //     __resize();

    //     window.addEventListener('resize', __resize, false);

    //     function __resize() {

    //         currClientWidth = document.documentElement.clientWidth;

    //         if (currClientWidth > 768){

    //             currClientWidth = 768;

    //         }
    //         if (currClientWidth < 320){

    //             currClientWidth = 320;

    //         }
    //         fontValue = ((625 * currClientWidth) / originWidth).toFixed(2);

    //         document.documentElement.style.fontSize = fontValue + '%';

    //     }

    // })();
  </script>
  <style>
    body{
      /* font-size: 14px;
      font-size: 0.25rem;
      overflow: hidden;
      font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      -webkit-font-smoothing: antialiased;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom); */
    }
  </style>
</head>

<body>

<button type="button" onclick="">点击我！</button>
<p id="demo">这是一个演示。</p>

</body>
</html>

参考资料：
＜meta name=“viewport“ content=“width=device-width, initial-scale=1, maximum-scale=1“＞_清灵夜雨的博客-CSDN博客_maximum-scale=1

关于微信安卓端网页字体适配的通知 | 微信开放社区

小程序webview 页面被放大_WebView显示的网页在大分辨率屏下被放大--解决方案_黑你就是没商量的博客-CSDN博客