一、问题如下图所示，微信小程序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>小程序webview 页面被放大_WebView显示的网页在大分辨率屏下被放大--解决方案_黑你就是没商量的博客-CSDN博客