导航

专业做网站建设公司、网页设计制作、百度优化推广、网站维护托管等网站相关业务,欢迎咨询。

域名空间 | 服务领域  网站建设1500元全包。做完验收修改到满意为止可淘宝付款有保证!
当前位置: 邯郸网站建设 > 网页设计制作百科 > 常见问题

网站建设自适应终端屏幕大小如何自动调整document的字体大小


来源:邯郸煜阳网络公司  时间:2020-06-06 15:31    
网站建设自适应终端屏幕大小如何自动调整document的字体大小呢?客户说,手机端有的屏幕有的大,有的小,如何做到自动根据终端屏幕大小进行调整呢,煜阳网络公司网站建设人员整理了以下代码为各位同行朋友们测试。我们网站建设工作者从事多年,工作经验充足,不会的朋友也可以咨询网站建设问题,一起交流。

<script type="text/javascript">
  // 根据屏幕大小自动调整document的字体大小
  (function (doc, win) {
  var docEl = doc.documentElement;
  var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
  var scale = 1;
  // if([320,360,375,414,640].indexOf(docEl.clientWidth) >= 0) return;
  var recalc = function () {
  var width = docEl.clientWidth;
  if(width >= 640){
  docEl.style.fontSize = '32px';
  document.getElementsByTagName('html')[0].style.fontSize = '32px';
  }else{
  docEl.style.fontSize = width / 20 * scale + 'px';
  document.getElementsByTagName('html')[0].style.fontSize = width / 20 * scale + 'px';
  }
  };
  recalc();
   
  // 解决华为手机的rem值偏小问题
  document.getElementsByTagName('head')[0].style.width = '20rem';
  document.getElementsByTagName('head')[0].style.height = '0px';
  document.getElementsByTagName('head')[0].style.display = 'block';
  // console.log(document.getElementsByTagName('head')[0].offsetWidth , docEl.clientWidth);
  if(document.getElementsByTagName('head')[0].offsetWidth < docEl.clientWidth){
  scale = docEl.clientWidth/document.getElementsByTagName('head')[0].offsetWidth;
  recalc();
  document.getElementsByTagName('head')[0].style.display = 'none';
  }
   
  // 根据页面链接后缀,调整字体大小
  var fontsize = location.href.match(/fontsize=\d/ig);
  if(fontsize && fontsize.length > 0 && /appdoc|body/ig.test(location.pathname)){
  fontsize = fontsize[0].replace('fontsize=','');
  switch(fontsize){
  case '0':scale = scale*0.8;break;
  case '2':scale = scale*1.2;break;
  case '3':scale = scale*1.5;break;
  }
  recalc();
  }
   
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  })(document, window);
  </script>