App.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. <script>
  2. export default {
  3. onLaunch: function() {
  4. this.fontSizeSetting()
  5. },
  6. onHide: function() {
  7. console.log('App Hide')
  8. },
  9. methods: {
  10. fontSizeSetting() {
  11. window.onload = function() {
  12. setAndroidFontsize();
  13. htmlFontSize()
  14. }
  15. window.onresize = function() {
  16. setAndroidFontsize();
  17. htmlFontSize()
  18. }
  19. // 安卓解决微信浏览器字体被调大导致页面错乱的办法
  20. function setAndroidFontsize() {
  21. if (typeof window.WeixinJSBridge == "object" && typeof window.WeixinJSBridge.invoke == "function") {
  22. handleFontSize();
  23. } else {
  24. if (document.addEventListener) {
  25. document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
  26. } else if (document.attachEvent) {
  27. document.attachEvent("WeixinJSBridgeReady", handleFontSize);
  28. document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
  29. }
  30. }
  31. }
  32. function handleFontSize() {
  33. window.WeixinJSBridge.invoke('setFontSizeCallback', {
  34. 'fontSize': 0
  35. });
  36. window.WeixinJSBridge.on('menu:setfont', function() {
  37. window.WeixinJSBridge.invoke('setFontSizeCallback', {
  38. 'fontSize': 0
  39. });
  40. });
  41. }
  42. function htmlFontSize() {
  43. var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  44. var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  45. var width = w > h ? h : w;
  46. width = width > 720 ? 720 : width
  47. var fz = ~~(width / 15)
  48. document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz + "px";
  49. var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace(
  50. 'px', '') *
  51. 10000) / 10000
  52. if (fz !== realfz) {
  53. document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) + "px";
  54. }
  55. }
  56. }
  57. }
  58. }
  59. </script>
  60. <style lang="scss">
  61. @import 'uview-ui/index.scss'; //引入uview-ui样式
  62. page {
  63. font-size: 28rpx;
  64. color: #333;
  65. }
  66. /*每个页面公共css */
  67. </style>