flexible.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. (function flexible(window, document) {
  2. var docEl = document.documentElement
  3. var dpr = window.devicePixelRatio || 1
  4. // adjust body font size
  5. function setBodyFontSize() {
  6. if (document.body) {
  7. document.body.style.fontSize = (12 * dpr) + 'px'
  8. } else {
  9. document.addEventListener('DOMContentLoaded', setBodyFontSize)
  10. }
  11. }
  12. // setBodyFontSize();
  13. // set 1rem = viewWidth / 10
  14. function setRemUnit() {
  15. var width = docEl.clientWidth;
  16. /*if (width / dpr > 540) {
  17. width = 540 * dpr;
  18. }*/
  19. var rem = width / 10;
  20. docEl.style.fontSize = rem + 'px';
  21. }
  22. setRemUnit()
  23. // reset rem unit on page resize
  24. window.addEventListener('resize', setRemUnit)
  25. window.addEventListener('pageshow', function (e) {
  26. if (e.persisted) {
  27. setRemUnit()
  28. }
  29. })
  30. // detect 0.5px supports
  31. if (dpr >= 2) {
  32. var fakeBody = document.createElement('body')
  33. var testElement = document.createElement('div')
  34. testElement.style.border = '.5px solid transparent'
  35. fakeBody.appendChild(testElement)
  36. docEl.appendChild(fakeBody)
  37. if (testElement.offsetHeight === 1) {
  38. docEl.classList.add('hairlines')
  39. }
  40. docEl.removeChild(fakeBody)
  41. }
  42. // 超大屏手机适配
  43. if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
  44. handleFontSize();
  45. } else {
  46. if (document.addEventListener) {
  47. document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
  48. } else if (document.attachEvent) {
  49. //IE浏览器,非W3C规范
  50. document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
  51. }
  52. }
  53. function handleFontSize() {
  54. // 设置网页字体为默认大小
  55. WeixinJSBridge.invoke('setFontSizeCallback', {
  56. 'fontSize': 0
  57. });
  58. // 重写设置网页字体大小的事件
  59. WeixinJSBridge.on('menu:setfont', function () {
  60. WeixinJSBridge.invoke('setFontSizeCallback', {
  61. 'fontSize': 0
  62. });
  63. });
  64. }
  65. }(window, document))