flexible.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. //这里750是原始设计果图大小
  2. var fontSizeAuto = function(oriWidth){
  3. return function(){
  4. var viewportWidth = document.documentElement.clientWidth;
  5. if(viewportWidth > oriWidth){ viewportWidth = oriWidth; }
  6. if(viewportWidth < 320){ viewportWidth = 320; }
  7. document.documentElement.style.fontSize = viewportWidth/(oriWidth/75) +'px';
  8. }
  9. }
  10. fontSizeAuto(750)();
  11. window.onresize = fontSizeAuto(750);
  12. // ;(function(win, lib) {
  13. // var doc = win.document;
  14. // var docEl = doc.documentElement;
  15. // var metaEl = doc.querySelector('meta[name="viewport"]');
  16. // var flexibleEl = doc.querySelector('meta[name="flexible"]');
  17. // var dpr = 0;
  18. // var scale = 0;
  19. // var tid;
  20. // var flexible = lib.flexible || (lib.flexible = {});
  21. // if (metaEl) {
  22. // //console.warn('将根据已有的meta标签来设置缩放比例');
  23. // var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
  24. // if (match) {
  25. // scale = parseFloat(match[1]);
  26. // dpr = parseInt(1 / scale);
  27. // }
  28. // } else if (flexibleEl) {
  29. // var content = flexibleEl.getAttribute('content');
  30. // if (content) {
  31. // var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
  32. // var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
  33. // if (initialDpr) {
  34. // dpr = parseFloat(initialDpr[1]);
  35. // scale = parseFloat((1 / dpr).toFixed(2));
  36. // }
  37. // if (maximumDpr) {
  38. // dpr = parseFloat(maximumDpr[1]);
  39. // scale = parseFloat((1 / dpr).toFixed(2));
  40. // }
  41. // }
  42. // }
  43. // if (!dpr && !scale) {
  44. // var isAndroid = win.navigator.appVersion.match(/android/gi);
  45. // var isIPhone = win.navigator.appVersion.match(/iphone/gi);
  46. // var devicePixelRatio = win.devicePixelRatio;
  47. // if (isIPhone) {
  48. // // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
  49. // if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
  50. // dpr = 3;
  51. // } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
  52. // dpr = 2;
  53. // } else {
  54. // dpr = 1;
  55. // }
  56. // } else {
  57. // // 其他设备下,仍旧使用1倍的方案
  58. // dpr = 1;
  59. // }
  60. // scale = 1 / dpr;
  61. // }
  62. // docEl.setAttribute('data-dpr', dpr);
  63. // if (!metaEl) {
  64. // metaEl = doc.createElement('meta');
  65. // metaEl.setAttribute('name', 'viewport');
  66. // metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
  67. // if (docEl.firstElementChild) {
  68. // docEl.firstElementChild.appendChild(metaEl);
  69. // } else {
  70. // var wrap = doc.createElement('div');
  71. // wrap.appendChild(metaEl);
  72. // doc.write(wrap.innerHTML);
  73. // }
  74. // }
  75. // function refreshRem(){
  76. // var width = docEl.getBoundingClientRect().width;
  77. // if (width / dpr > 540) {
  78. // width = 540 * dpr;
  79. // }
  80. // var rem = width / 10;
  81. // docEl.style.fontSize = rem + 'px';
  82. // flexible.rem = win.rem = rem;
  83. // }
  84. // win.addEventListener('resize', function() {
  85. // clearTimeout(tid);
  86. // tid = setTimeout(refreshRem, 300);
  87. // }, false);
  88. // win.addEventListener('pageshow', function(e) {
  89. // if (e.persisted) {
  90. // clearTimeout(tid);
  91. // tid = setTimeout(refreshRem, 300);
  92. // }
  93. // }, false);
  94. // if (doc.readyState === 'complete') {
  95. // doc.body.style.fontSize = 12 * dpr + 'px';
  96. // } else {
  97. // doc.addEventListener('DOMContentLoaded', function(e) {
  98. // doc.body.style.fontSize = 12 * dpr + 'px';
  99. // }, false);
  100. // }
  101. // refreshRem();
  102. // flexible.dpr = win.dpr = dpr;
  103. // flexible.refreshRem = refreshRem;
  104. // flexible.rem2px = function(d) {
  105. // var val = parseFloat(d) * this.rem;
  106. // if (typeof d === 'string' && d.match(/rem$/)) {
  107. // val += 'px';
  108. // }
  109. // return val;
  110. // }
  111. // flexible.px2rem = function(d) {
  112. // var val = parseFloat(d) / this.rem;
  113. // if (typeof d === 'string' && d.match(/px$/)) {
  114. // val += 'rem';
  115. // }
  116. // return val;
  117. // }
  118. // })(window, window['lib'] || (window['lib'] = {}));