Record the problems encountered during the development and the solutions.

In the development of wechat public number, the mobile phone set up a large font to affect the H5 page style disorder solution

1. You only need to set the body style on ios

body{ -webkit-text-size-adjust: 100% ! important; text-size-adjust: 100% ! important; -moz-text-size-adjust: 100% ! important; }Copy the code

2. Android needs to determine whether it is a wechat environment.

<script> (function () { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else { document.addEventListener("WeixinJSBridgeReady", handleFontSize, false); HtmlFontSize ()} function handleFontSize() {weixinjsbridge.invoke ('setFontSizeCallback', {'fontSize': 0}); On ('menu:setfont', function () {weixinjsbridle.invoke ('setFontSizeCallback', { 'fontSize': 0 }); }); } function htmlFontSize() { var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); var width = w > h ? h : w; width = width > 720 ? 720: width var fz = ~~(width * 100000 / 36) / 10000 document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz + "px"; var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace('px', '') * 10000) / 10000 if (fz ! == realfz) { document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) + "px"; }}}) (); </script>Copy the code