rem布局在部分手机上显示不正常问题
2019独角兽企业重金招聘Python工程师标准>>>
问题描述:通过rem计算的宽度和手机上实际显示的宽度不一致,改用px跟预想一致。
导致原因:部分安卓手机或者webview调整了系统默认字体大小。此时在html根节点上设置的20px已经不是20px了,导致计算rem宽度出错。
解决办法:
1、计算实际字号:
var actualSize = parseFloat(window.getComputedStyle(document.documentElement)["font-size"]);
2、计算缩放比例:
var scale = actualSize / rem; //rem为原本设置的根节点字号
3、为保持页面其它元素不受影响,直接缩放rem:
var remScaled = rem / scale;
完整代码:
;(function(win) {var docEl = win.document.documentElement,tid;function refreshRem() {var width = docEl.getBoundingClientRect().width;var rem = width / 750*100;//以750px为原稿,除以100可得各元素的remdocEl.style.fontSize = rem + "px";var actualSize = parseFloat(window.getComputedStyle(docEl)["font-size"]);if (actualSize !== rem) {var remScaled = rem / ( actualSize / rem );docEl.style.fontSize = remScaled + "px"}}function dbcRefresh() {clearTimeout(tid);tid = setTimeout(refreshRem, 100)}win.addEventListener("resize", function() { dbcRefresh() }, false);win.addEventListener("pageshow", function(e) {if (e.persisted) { dbcRefresh() }}, false);refreshRem();
})(window);
转载于:https://my.oschina.net/u/879103/blog/1785521
rem布局在部分手机上显示不正常问题相关推荐
- 相同布局在不同手机上显示不同_不懂响应式,不同尺寸屏幕下的页面很难达到最佳效果...
让用户在不同设备和尺寸的屏幕下看的页面显示效果更佳,屏幕空间利用更高,操作体验更统一,交互方式更符合习惯. 本文主要围绕什么是响应式,如何搭建响应系统,响应式网站解析 三个部分进行阐述,在项目中提前定 ...
- 相同布局在不同手机上显示不同_React Native布局详细指南
一款好的APP离不了一个漂亮的布局,本文章将向大家分享React Native中的布局方式FlexBox. 在React Native中布局采用的是FleBox(弹性框)进行布局. FlexBox提供 ...
- H5在原生手机上显示选中文字效果
H5在原生手机上显示选中文字效果 .comment {user-select: text;-webkit-user-select: text;-moz-user-select: text;-ms-us ...
- Unity3D:问题(已解决):如何:实现手机扫描电脑二维码,然后手机上显示此二维码对应的图片
目录 一.目的 1.想知道:如何:实现手机扫描电脑二维码,然后手机上显示此二维码对应的图片 二.参考 1. 三.注意 四.操作:1:失败:草料二维码官方不提供API.SDK等 1. 四.操作:2:失败 ...
- 关于手机上显示网页自适应大小viewport参数设置
目前在做一个手机网页自适应屏幕大小时碰到了问题,传统用以下代码设置网页自适应屏幕大小 <meta name="viewport" content="width=de ...
- vue-seamless-scroll在小米手机上显示不正常 显示出两行的问题
起因是 本来设置vue-seamless-scroll进行一行的向左循环滚动 但是在小米手机上他却显示了两行而且 并不是无缝滚动 网上查了好长时间没得到解决办法 只好自己分析 首先是vue-seaml ...
- 日期格式转化成时间戳,在IOS手机上显示成NaN
一.场景 开发的H5,嵌入第三方app中,在IOS手机上,发现参数atime显示成NaN,在Android手机上是正常的 二.实现方式 > var date='2022-10-10 10:10' ...
- html在手机上显示的是什么意思,手机上显示hd是什么意思?
01 手机状态显示HD表示您的手机已开启了高清语音通话功能,也就是就是传说中的VoLTE.简单来说,VoLTE是一种语音业务,能让4G用户的接通等待时间更短,通话质量更高,同时还可以提供高速视频通话和 ...
- Android 【信号格的客制化】Part 3:手机上显示的信号强度dbm值不正确
前言 欢迎大家我分享和推荐好用的代码段~~ 声明 欢迎转载,但请保留文章原始出处: CSDN:http://www.csdn.net ...
最新文章
- 系统架构师学习笔记_第二章_连载
- 【C 语言】变量本质 ( 变量概念 | 变量本质 - 内存空间别名 | 变量存储位置 - 代码区 | 变量三要素 )
- 零位扩展和符号位扩展
- webpack的多文件打包问题
- python窗体应用程序无阻塞_当GUI应用程序运行时,imshow阻塞线程
- 【声源定位】基于matlab广义互相关声源定位【含Matlab源码 548期】
- 昆明钉钉智慧校园K12解决方案,校园安全、健康、生活、办公、网络整体解决方案
- 深圳大学毕业答辩PPT模板
- 多大计算机科学世界排名,重磅!2021年QS世界大学学科排名发布!多大、UBC抢眼!这些专业最强!...
- Hudi on Flink在顺丰的实践应用.ppt
- 软件工程生命周期模型对比分析
- PaddlePaddle飞浆搭建和机器学习文字识别
- CC2530入网流程
- wx网罗系列之翔实:使用C++开发wxWidgets程序
- ubuntu安装 pyqt5 报错 xcb找不到 pyinstaller打包open3d报错
- git 删除远程仓库中的文件(夹)
- 「1121」Damn Single
- Real-Time Loop Closure in 2D LIDAR SLAM 翻译和总结(一)
- Vue组件库实现按需加载功能
- Windows文件类型
热门文章
- 更换YUM及升级包方法
- CAD2019软件安装教程
- php+读取配置里的值,ThinkPHP 读取配置信息与动态配置(C方法)
- Spring Ioc注解式开发中注解的作用
- php获取post表单数据_PHP获取POST表单数据
- Spring详解:WebServlet 中不能注入Bean对象
- android 上键,在Android键盘上设置Return键
- count 多个字段_一句话实现字段拆分成多行
- 解析CI即CodeIgniter框架在Nginx下的重写规则
- win2003禁止web等目录执行exe,bat,com的方法