h5禁止微信字体设置

css

解除微信字体大小设置，对h5页面的影响

在开发微信公众号，或者用微信打开一个h5页面，如果调整了微信的字体大小，页面的布局会发生改变，这样就做不到统一。
IOS和安卓用不同的方法禁止了微信字体的调整，见下例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微信字体大小设置</title>
</head>
<style>
  /* iOS禁止微信调整字体大小 */
  body {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
  }
</style>
<body>
  <h1>h1字体大小测试微信</h1>
  <h2>h2字体大小测试微信</h2>
  <h3>h3字体大小测试微信</h3>
  <h4>h4字体大小测试微信</h4>
  <h5>h5字体大小测试微信</h5>
  <h6>h6字体大小测试微信</h6>
  <div style="font-size:14px;">div字体大小测试微信px</div>
  <div style="font-size:2rem;">div字体大小测试微信rem</div>
</body>
<script>
  // 对安卓手机有效
  // 强制禁止用户修改微信客户端的字体大小
  (function() {
    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
    handleFontSize();
  } else {
    if (document.addEventListener) {
    document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
  } else if (document.attachEvent) {
    document.attachEvent("WeixinJSBridgeReady", handleFontSize);
    document.attachEvent("onWeixinJSBridgeReady", handleFontSize);  }
  }
  function handleFontSize() {
    // 设置网页字体为默认大小
    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
    // 重写设置网页字体大小的事件
    WeixinJSBridge.on('menu:setfont', function() {
      WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
    });
    }
  })();
  </script>
</html>

  微信