电话
13363039260
网站建设自适应终端屏幕大小如何自动调整document的字体大小
2020-06-06 15:31 admin
网站建设自适应终端屏幕大小如何自动调整document的字体大小呢？客户说，手机端有的屏幕有的大，有的小，如何做到自动根据终端屏幕大小进行调整呢，煜阳网络公司网站建设人员整理了以下代码为各位同行朋友们测试。我们网站建设工作者从事多年，工作经验充足，不会的朋友也可以咨询网站建设问题，一起交流。
Tag： 如何 建设 网站
| <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> |
Tag： 如何 建设 网站
猜你喜欢
联络方式：
13363039260
微信二维码 