背景

最近有个 h5项目由于真机（部分安卓手机）将字体调大导致 h5 页面布局发生了错误

原因

影响了内置 webview html 上 font-size 大小（设置的大小与实际显示的大小不一致）例如你将真机默认字体放大 html font-size 实际大小也会变大

解决

1.计算出真机环境下放大或缩小的比例
2. 再将设置的实际的值进行调整重新设置 html的 font-size

白话 说的 就是  假设 你设置的 rem 为40px 而实际上 真机展示的是 50px
这时候 你想要在真机上显示 40px 你就得 设置 40*（40/50）px = 32px
这样 真机就会放大显示为 40px  问题就得到解决了

代码

以项目中最常见得 flexible.js 适配方案

 function refreshRem(){var width = docEl.getBoundingClientRect().width;if (width / dpr > 540) {width = 540 * dpr;}var rem = width / 10;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;// 上面是源码// 下面是新加的// 通过getComputedStyle 获取浏览器 计算后的html font-size 真实大小let real_rem = ~~(window.getComputedStyle(docEl).fontSize.replace('px',''))// 再进行比较 不一致 则进行重新赋值 以达到不受真机字体大小 影响的效果if(rem !== real_rem) {docEl.style.fontSize = rem*(rem/real_rem) + 'px';}}

解决部分安卓机自带浏览器上h5页面 rem布局受到真机字体影响的问题相关推荐

调试H5页面-weinre及spy-debugger真机调试
以下是weinre及spy-debugger真机调试方式,spy-debugger内嵌了weinre,所以首选spy-debugger,weinre大致了解一下即可. 一.Weinre Weinre( ...
红米5a手机html查看器,【报Bug】uni.rquest 红米5a访问线上h5页面请求接口报错，控制台不显示接口...
详细问题描述 (DCloud产品不会有明显的bug,所以你遇到的问题大都是在特定环境下才能重现的问题,请仔细描述你的环境和重现方式,否则DCloud很难排查解决你的问题) [内容] 重现步骤红米5a ...
ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法参考文章: (1)ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法 (2) ...
记一次移动端兼容问题（已解决）（华为自带浏览器）
记一次移动端兼容问题(已解决)(华为自带浏览器) 参考文章: (1)记一次移动端兼容问题(已解决)(华为自带浏览器) (2)https://www.cnblogs.com/lee-xiumei/p/1 ...
安卓和ios移动端实现H5页面进行强制刷新
安卓和ios移动端实现H5页面进行强制刷新定义和用法 onpageshow 事件在用户浏览网页时触发.onpageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发, ...
安卓手机键盘弹出导致h5页面错乱
安卓手机键盘弹出导致h5页面错乱特别是有表单的h5,点击input输入信息的时候提交的按钮.以及定位到下方的图片都会被挤上来. 解决方法如下: <div class="bg_img& ...
解决vue低版本ios，安卓手机浏览器打开H5页面空白的问题
低版ios手机ios8,ios9,安卓6以后的自带浏览器打开VUE开发的H5页面有时候会出现白屏的问题,这是因为vue 项目中es6的方法和语法在这些低版本的手机上不支持,解决办法 es6转es5 一 ...
安卓微信自带浏览器无法呼出摄像头问题
问题描述:前一段时间做了一个H5页面,用微信扫描打开之后上传文件功能无法选择相机拍照解决方式:<input type="file" accept="image/* ...
Android5g手机,今年唯一小屏安卓5G手机！5.7寸+骁龙765G：真机亮相！
对于小屏党来说,今年是悲剧的一年,如果说去年还有小米9SE和三星S10E这两款价格各异,外观配置都很不错的小屏安卓强机可选的话,今年它们的续作已经明确全部砍掉了.三星S10E变成了三星S20,变得更大 ...

解决部分安卓机自带浏览器上h5页面 rem布局受到真机字体影响的问题

背景

原因

解决

代码

解决部分安卓机自带浏览器上h5页面 rem布局受到真机字体影响的问题相关推荐

最新文章

热门文章

解决部分安卓机 自带浏览器 上h5页面 rem布局 受到 真机字体影响的问题

背景

原因

解决

代码

解决部分安卓机 自带浏览器 上h5页面 rem布局 受到 真机字体影响的问题相关推荐

最新文章

热门文章

解决部分安卓机自带浏览器上h5页面 rem布局受到真机字体影响的问题

解决部分安卓机自带浏览器上h5页面 rem布局受到真机字体影响的问题相关推荐