flexible.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. function findDimensions() //函数:获取尺寸
  2. {
  3. if (window.innerWidth){
  4. winWidth = window.innerWidth;
  5. } else if ((document.body) && (document.body.clientWidth)){
  6. winWidth = document.body.clientWidth;
  7. } else if (document.documentElement && document.documentElement.clientWidth){
  8. winWidth = document.documentElement.clientWidth;
  9. }
  10. // console.log(winWidth)
  11. // if(winWidth<546){
  12. //
  13. ;(function(win, lib) {
  14. var doc = win.document;
  15. var docEl = doc.documentElement;
  16. var metaEl = doc.querySelector('meta[name="viewport"]');
  17. var flexibleEl = doc.querySelector('meta[name="flexible"]');
  18. var dpr = 0;
  19. var scale = 0;
  20. var tid;
  21. var flexible = lib.flexible || (lib.flexible = {});
  22. if (metaEl) {
  23. //将根据已有的meta标签来设置缩放比例
  24. var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
  25. if (match) {
  26. scale = parseFloat(match[1]);
  27. dpr = parseInt(1 / scale);
  28. }
  29. } else if (flexibleEl) {
  30. var content = flexibleEl.getAttribute('content');
  31. if (content) {
  32. var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
  33. var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
  34. if (initialDpr) {
  35. dpr = parseFloat(initialDpr[1]);
  36. scale = parseFloat((1 / dpr).toFixed(2));
  37. }
  38. if (maximumDpr) {
  39. dpr = parseFloat(maximumDpr[1]);
  40. scale = parseFloat((1 / dpr).toFixed(2));
  41. }
  42. }
  43. }
  44. if (!dpr && !scale) {
  45. var isAndroid = win.navigator.appVersion.match(/android/gi);
  46. var isIPhone = win.navigator.appVersion.match(/iphone/gi);
  47. var devicePixelRatio = win.devicePixelRatio;
  48. if (isIPhone) {
  49. // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
  50. if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
  51. dpr = 3;
  52. } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
  53. dpr = 2;
  54. } else {
  55. dpr = 1;
  56. }
  57. } else {
  58. // 其他设备下,仍旧使用1倍的方案
  59. dpr = 1;
  60. }
  61. scale = 1 / dpr;
  62. }
  63. docEl.setAttribute('data-dpr', dpr);
  64. if (!metaEl) {
  65. metaEl = doc.createElement('meta');
  66. metaEl.setAttribute('name', 'viewport');
  67. metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
  68. if (docEl.firstElementChild) {
  69. docEl.firstElementChild.appendChild(metaEl);
  70. } else {
  71. var wrap = doc.createElement('div');
  72. wrap.appendChild(metaEl);
  73. doc.write(wrap.innerHTML);
  74. }
  75. }
  76. function refreshRem(){
  77. var width = docEl.getBoundingClientRect().width;
  78. if (width / dpr > 540) {
  79. width = 540 * dpr;
  80. }
  81. var rem = width / 10;
  82. docEl.style.fontSize = rem + 'px';
  83. flexible.rem = win.rem = rem;
  84. }
  85. win.addEventListener('resize', function() {
  86. clearTimeout(tid);
  87. tid = setTimeout(refreshRem, 300);
  88. }, false);
  89. win.addEventListener('pageshow', function(e) {
  90. if (e.persisted) {
  91. clearTimeout(tid);
  92. tid = setTimeout(refreshRem, 300);
  93. }
  94. }, false);
  95. if (doc.readyState === 'complete') {
  96. doc.body.style.fontSize = 12 * dpr + 'px';
  97. } else {
  98. doc.addEventListener('DOMContentLoaded', function(e) {
  99. doc.body.style.fontSize = 12 * dpr + 'px';
  100. }, false);
  101. }
  102. refreshRem();
  103. flexible.dpr = win.dpr = dpr;
  104. flexible.refreshRem = refreshRem;
  105. flexible.rem2px = function(d) {
  106. var val = parseFloat(d) * this.rem;
  107. if (typeof d === 'string' && d.match(/rem$/)) {
  108. val += 'px';
  109. }
  110. return val;
  111. }
  112. flexible.px2rem = function(d) {
  113. var val = parseFloat(d) / this.rem;
  114. if (typeof d === 'string' && d.match(/px$/)) {
  115. val += 'rem';
  116. }
  117. return val;
  118. }
  119. // console.info("执行") ;
  120. })(window, window['lib'] || (window['lib'] = {}));
  121. // }else{
  122. // // console.info("执行2");
  123. // //获取窗口宽度
  124. // if (window.innerWidth)
  125. // winWidth = window.innerWidth;
  126. // else if ((document.body) && (document.body.clientWidth))
  127. // winWidth = document.body.clientWidth;
  128. //
  129. // //通过深入Document内部对body进行检测,获取窗口大小
  130. // if (document.documentElement && document.documentElement.clientWidth)
  131. // {
  132. //
  133. // winWidth = document.documentElement.clientWidth;
  134. // }
  135. // //结果输出至两个文本框
  136. // // var x=54+((winWidth-546)*0.1);
  137. // //
  138. // //
  139. // //
  140. // // var attr = document.getElementById("attr");
  141. // //
  142. // // if(winWidth>546){
  143. // // attr.setAttribute("style", "font-size:"+x+"px;")
  144. // //
  145. // // }
  146. // }
  147. }
  148. findDimensions();
  149. //调用函数,获取数值
  150. window.onresize=findDimensions;