系统字体放大导致rem布局错乱,解决方案,已通过测试
如果你用rem没遇到过坑,那只能说明你 too young too simple;
(function (doc, win) {
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var cW = document.documentElement.clientWidth,
iW = window.innerWidth;
var w = Math.max(cW, iW);
w = w > 750 ? 750 : w;
var fz = ~~(w / 7.5);
document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz + "px";
function setHtmlSize() {
var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace('px', '') * 10000) / 10000;
if (fz !== realfz) {
document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) + "px";
}
}
setHtmlSize();
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
系统字体放大导致rem布局错乱,解决方案,已通过测试的更多相关文章
- rem布局,在用户调整手机字体大小/用户调整浏览器字体大小后,布局错乱问题
一.用户调整浏览器字体大小,影响的是从浏览器打开的web页. 浏览器设置字体大小,影响浏览器打开的页面.通过js可控制用户修改字体大小,使页面不受影响. (function(doc, win) { / ...
- 用js判断屏幕的宽度,改变html字体大小用rem布局
if (document.documentElement.clientWidth > 600) {//页面宽度大于600px让其宽度等于600px,字体大小等于60px,居中 document. ...
- ie、firefox、chrome中关于style="display:block" 引发的页面布局错乱的解决办法
ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:b ...
- 移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题
一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面.Android的可以通过webview配置webview.getSettings().setTextZ ...
- 一个因为系统字号设置导致的rem计算渲染异常问题
测试同学突然拿着一部手机过来说,H5渲染各个元素都变大了,有些元素撑出了屏幕外面. 本来以为是某个Webview的渲染兼容问题,结果发现所有的浏览器都这样. 莫名其妙,隐约感觉是 rem计算出了问题, ...
- 手机端页面自适应解决方案—rem布局进阶版
手机端页面自适应解决方案—rem布局进阶版 https://www.jianshu.com/p/985d26b40199 注:本文转载之处:https://www.cnblogs.com/anni ...
- 手机端页面自适应解决方案—rem布局(进阶版,附源码示例)
转自:https://segmentfault.com/a/1190000007350680 一年前笔者写了一篇 <手机端页面自适应解决方案—rem布局>,意外受到很多朋友的关注和喜欢.但 ...
- 安卓下设置系统字体大小影响H5页面布局
问题描述: 调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小,后内嵌H5布局乱掉 问题分析: 因为用户调整了系统字体的大小,修改了根节点和body节点的font-siz ...
- 手机端页面自适应解决方案—rem布局(该方案目前已过时)
转自:https://segmentfault.com/a/1190000004705207 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题,当然解决方案很多,比如:百分比布局,弹性布局fl ...
随机推荐
- 3. 键值对RDD
键值对RDD是Spark中许多操作所需要的常见数据类型.除了在基础RDD类中定义的操作之外,Spark为包含键值对类型的RDD提供了一些专有的操作在PairRDDFunctions专门进行了定义.这些 ...
- 排Bug技巧
排Bug技巧 什么是Bug? Bug一词的英文原意是"臭虫"或"虫子".但是现在,在电脑系统或游戏程序中,如果隐藏着的一些未被发现的缺陷或问题,可被人利用,人们 ...
- Python2与Python3兼容
Python2与Python3兼容 python3写的代码如何也能在pyhon2上跑?请无论如何加上这一句,python3没有啥影响 from __future__ import absolute_i ...
- Spring AOP创建AroundAdvice实例
AroundAdvice 1.在方法之前和之后来执行相应的操作 2.实现MethodInterceptor接口 接口文件: public interface IHello { public void ...
- Computational biological hypothesis generation using "-omics" data
Computational biological hypothesis generation using "-omics" data Forming biological hypo ...
- ZeroMQ自查手册
简介 ZMQ (以下 ZeroMQ 简称 ZMQ)是一个简单好用的传输层,像框架一样的一个 socket library,他使得 Socket 编程更加简单.简洁和性能更高.是一个消息处理队列库,可在 ...
- 【洛谷 P3966】 [TJOI2013]单词(AC自动机,差分)
把单词连起来,中间插入间隔符,同 #include <cstdio> #include <queue> #include <cstring> using names ...
- vue+ElementUI+高德API地址模糊搜索(自定义UI组件)
开发环境描述: Vue.js ElementUI 高德地图API 需求描述: 在新增地址信息的时候,我们需要根据input输入的关键字调用地图的输入提示API,获取到返回的数据,并根据这些数据生成下拉 ...
- thinkphp5 使用PHPExcel 导入导出
首先下载PHPExcel类.网上很多,自行下载. 然后把文件放到vendor文件里面. 一般引用vendor里面的类或者插件用vendor(); 里面加载的就是vendor文件,然后想要加载哪个文件, ...
- Android Room 使用案例
本内容主要介绍 Android 中使用 Room 保存数据到本地数据库的方法. 以下是 Android Room 的官方介绍文档: Room Persistence Library(Room 库的简 ...