关于移动端页面在手机调整字体大小后无法正常显示（已解决）

关于移动端页面在手机调整字体大小后内容适配的问题，作为新手我也刚好是第一次遇到，

已经完成的移动端页面，正常情况下在手机上的浏览器端和App端都可以正常显示，可当测

试把手机字体调大后，布局就忽然变乱了....盒子里面的内容向内挤了。说实话，刚开始感觉

这种问题应该可以忽略，毕竟字体调大后，又可以调回原来的啊，而且大部分手机都是默认

显示标准字体吧。而且我在移动端的meta标签里已经给viewport容器添加了相应属性值，

也是用rem布局的，还会出现这种错乱的情况，我能怎么办....不过后来想了想，既然你是前

端工程师，搞技术的，就应该要学会解决技术问题啊，所以我还是打开了浏览器，开始动手

我最熟悉的骚操作Ctrl+C、Ctrl+V...

刚开始我在找是不是viewport容器里还有些属性值少添加了。

我自己原来的值是这样的：<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">

感觉是正常的，因为已经调整好了设备宽度、默认缩放比、还有禁止用户手动缩放，所以应该没问题，不过我之后

还是多添加了两个属性值：

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">

添加的属性值是最小和最大缩放比，其实感觉没必要了，因为已经设置了初始化缩放比，不过还是提交测试了，

意料之中，还是没用....

之后上网终于找了一篇大佬文章，关于如何处理移动端调整字体大小问题的解决方案

文章链接：https://www.cnblogs.com/axl234/p/7753187.html

我下面的代码也是参考他的，不过自己有一些小改动，反正我的移动端页面已经适应了。[耶][耶][耶]

（注：需要注意的是每次调整手机字体大小后，需要重新刷新下页面才有效）


fontAdapt();function fontAdapt(){/*适应移动端APP调整字体大小*/(function() {//新创建一个div元素，并设置该元素的字体大小var $dom = document.createElement('div');//移动端采用rem布局，所以设置新创建的元素字体单位为rem//这里设置字体大小为10，方便后面计算$dom.style = 'font-size:10rem;';document.body.appendChild($dom);//计算出新创建元素调整后的字体大小var scaledFontSize = parseInt(window.getComputedStyle($dom, null).getPropertyValue('font-size'));//移除新创建元素，以免影响页面布局document.body.removeChild($dom);//计算原字体和调整后字体的比例，原字体为10rem，取数字10，var scaleFactor = 10 / scaledFontSize;//取出html元素字体的大小//注意，这个大小也经过缩放了var originRootFontSize = parseInt(window.getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));//通过上面的比例调整页面当前的字体大小，以适应移动端，单位为remdocument.documentElement.style.fontSize = originRootFontSize * scaleFactor + 'rem';})();/*适应手机端浏览器调整字体大小*/(function(doc, win) {//用原生方法获取用户设置的浏览器的字体大小(兼容ie)if(doc.documentElement.currentStyle) {var user_webset_font=doc.documentElement.currentStyle['fontSize'];}else {var user_webset_font=getComputedStyle(doc.documentElement,false)['fontSize'];}//取整后与默认16px的比例系数var xs=parseFloat(user_webset_font)/16;//设置rem的js设置的字体大小var view_jsset_font,result_font;var docEl = doc.documentElement,resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',clientWidth,recalc = function() {clientWidth = docEl.clientWidth;if(!clientWidth) return;if(!doc.addEventListener) return;if(clientWidth<750){//设置rem的js设置的字体大小view_jsset_font=100 * (clientWidth / 750);//最终的字体大小为rem字体/系数result_font=view_jsset_font/xs;//设置根字体大小docEl.style.fontSize = result_font + 'px';}else{docEl.style.fontSize = 100 + 'px';}};win.addEventListener(resizeEvt, recalc, false);doc.addEventListener('DOMContentLoaded', recalc, false);})(document, window);
}

有哪里不懂或有更好建议的欢迎留言~~

关于移动端页面在手机调整字体大小后无法正常显示（已解决）相关推荐

微信公众号h5页面禁止用户调整字体大小
微信公众号内 h5页面,使用计算后的单位 rem 时,用户调整字体大小会导致页面字体.元素的宽高变大活变小,导致页面布局错乱使其拖拽后禁止修改页面基础字体大小 this.prohibitAndroi ...
禁止微信内置浏览器调整字体大小，从而保证页面不错乱
最近发现在微信浏览器中调整页面的字体大小时,会打乱页面的整个布局,在网上找了找解决的方案,找到了以下此方案,有效的解决了这个问题目前iOS的解决方案是覆盖掉微信的样式:/* IOS禁止微信调整字体大 ...
h5 android 字体设置,解决因为手机设置字体大小导致h5页面在webview中变形的BUG
解决因为手机设置字体大小导致h5页面在webview中变形的BUG 首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置 ...
微信字号调整问题 html,微信H5适配解决微信调整字体大小导致Html5页面混乱
最近开发公众号遇到一个问题: iOS.Android 加载页面,如果用户调整了微信自带的字体大小,那么我们的页面就会跟随调整字体大小,导致页面错乱无法适配.所以希望能够禁止微信的字体放大功能. 找了一 ...
jsp页面适应手机屏幕_JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码...
手机的屏幕有大有小,移动web最好做成响应式布局,也就是自适应屏幕,没有固定宽高,这样的话,在所有手机上都可以正常显示.关于移动端页面按手机屏幕分辨率自动缩放的js,先附上代码 var phoneWi ...
手机整屏显示数据php,JavaScript实现移动端页面按手机屏幕分辨率自动缩放示例...
这篇文章主要介绍了移动端页面按手机屏幕分辨率自动缩放的js代码,通过阻止浏览器的默认行为各方面分析缩放的功能实现,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下. 手机的屏幕有大有 ...
关于微信浏览器调整字体大小，H5页面适配问题
最近开发公众号遇到一个问题: 1.ios,Android 加载页面,如果用户调整了微信自带的字体大小,那么我们的页面就会跟随调整字体大小,导致页面错乱无法适配. 找寻了一些方法总结如下: 1.ios ...
解决微信调整字体大小导致Html5页面混乱
原理:阻止ios和安卓调整字体大小时候的事件,ios通过添加css属性,安卓通过微信属性去阻止注:添加后无法通过外部更改字体大小,根据项目需求运用 ios系统: body{-webkit-text- ...
禁止微信内置浏览器调整字体大小
微信webview内置了调整字体大小的功能,用户可以根据实际情况进行调节.但是很多移动端页面的开发都是使用rem作为单位的,字体大小改变以后,会出现页面布局错乱的情况,因此希望能够禁止微信的字体放大功 ...

关于移动端页面在手机调整字体大小后无法正常显示（已解决）

有哪里不懂或有更好建议的欢迎留言~~

关于移动端页面在手机调整字体大小后无法正常显示（已解决）相关推荐

最新文章

热门文章