Android调整系统字体导致采用REM布局错乱的解决方法 |
您所在的位置：网站首页 › 安卓手机字体大小设置vivo › Android调整系统字体导致采用REM布局错乱的解决方法 |
|
移动端web开发，采用rem布局写的html页面，对于安卓系统来说，如果系统字体调成很大，会影响html页面的布局，导致页面被扩大或混乱，解决方法是把自行定义的rem值和获取到的系统的字体大小进行比对，如果不一致，再进行二次缩放， vue项目的话，以下方法放在methods里面，然后在created里面进行调用一次就行了； 当然以下方法也是网络上参考； 亲测可用； function calcREM() { var docEl = document.documentElement; var width = docEl.getBoundingClientRect().width; var rem = width / 10;//这个10，请根据自己项目进行修改，10rem等于占宽100% rem = parseFloat(rem.toFixed(3)); docEl.style.fontSize = rem + 'px'; // 修正系统字体调整造成的布局问题 var realitySize = parseFloat(window.getComputedStyle(document.documentElement).fontSize); if (rem !== realitySize) { rem = rem * rem / realitySize; docEl.style.fontSize = rem + 'px'; } window.REM = rem; }
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |