一、用户调整浏览器字体大小,影响的是从浏览器打开的web页。

  浏览器设置字体大小,影响浏览器打开的页面。通过js可控制用户修改字体大小,使页面不受影响。

  

(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);

  

二、用户修改手机字体设置大小,影响App里打开的web页面。

手机字体设置大小,影响App的页面。

Android的可以通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放,按照百分百显示。

rem布局,在用户调整手机字体大小/用户调整浏览器字体大小后,布局错乱问题的更多相关文章

  1. 移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题

    一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面.Android的可以通过webview配置webview.getSettings().setTextZ ...

  2. phpStorm字体大小无法调整, 怎么办?

    最近上手了一款轻量级IDE phpStorm,可是就在调整编辑器字体大小时却遇到问题了, 发现字体大小无法调整,另外还有字体大小往左还有个“√”,始终无法去掉,这个勾限制了字体系列,就可怜巴巴的那几个 ...

  3. Quartus中代码字体大小的调整方法

    Quartus中代码大小的调整方法 网友 "一纸玫瑰"整理 第一步:点击Tools(工具) 第二步:点击Options(选项) 第三步:Text Editor(文本编辑)/Font ...

  4. css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  5. 网页设计之字体和 CSS 调整

    调整 CSS 首先,我们先来看看问题的源头.CSS 的出现曾是技术的一大进步.你可以用一个集中式的样式表来装饰多个网页.如今很多 Web 开发者都会使用 Bootstrap 这样的框架. 这些框架当然 ...

  6. 83 parrted-分区和分区大小的调整

    parted命令是由GNU组织开发的一款功能强大的磁盘分区和分区大小调整工具,与fdisk不同,它支持调整分区的大小.作为一种设计用于Linux的工具,它没有构建成处理与fdisk关联的多种分区类型, ...

  7. cacti气象图调整(批量位置调整、更改生成图大小等)

    cacti气象图能够非常直观的看到各个节点的流量.这里用的是CactiEZ中文版 V10 1.调整气象图大小 默认有一个1024像素的背景图可选, 这里我们须要新增一个1600像素的背景图. 背景图自 ...

  8. iOS开发笔记-根据frame大小动态调整fontSize的自适应文本及圆形进度条控件的实现

    最近同样是新App,设计稿里出现一种圆形进度条的设计,如下: 想了想,圆形进度条实现起来不难,但是其中显示百分比的文本确需要自适应,虽然可以使用时自己设定文本字体的大小,但是这样显得很麻烦,也很low ...

  9. 微信小程序如何下载超过大小限制(10M)的视频?(苹果用户仔细看,安卓用户快速看)

    众所周知,微信小程序对下载的文件大小有限制,目前是最大支持10M.我们在用去水印小程序保存视频的时候,如果遇到长视频,视频大小可能就超过限制.遇到这种情况,我们如何才能把视频保存到手机相册呢? 首先, ...

随机推荐

  1. 【转载】C++面试题(1-50)

    转自http://www.jobui.com/mianshiti/it/cpp/5017/ 1.    面向对象的程序设计思想是什么? 答:把数据结构和对数据结构进行操作的方法封装形成一个个的对象. ...

  2. js判断非127开头的IP地址

    js验证回送地址,IP地址不能以127开头 回送地址(127.x.x.x)是本机回送地址(Loopback Address) var ipNotStartWith127 = function(ip) ...

  3. VS Code 配置 C/C++ (Windwos)

    下载VSCode https://code.visualstudio.com/Download 在扩展里安装C/C++插件 配置MinGW 需要再环境变量中的path中添加MinGW的bin目录 修改 ...

  4. Can't bind to 'ngModel' since it isn't a known property of 'input'.

    angular项目启动报错 Can't bind to 'ngModel' since it isn't a known property of 'input'. 原因:当前module模块未引入 ' ...

  5. 8.10-Day2T2 吃喝大法好

    题目大意 略... 题解 开始两个人一定是一个向右走一个向下走,向右走的人最终会走到(n-1,m),向下走的人一定会走到(n,m-1). 那么不考虑重复的话总的路径数就是从(1,2)到(n-1,m)的 ...

  6. 2019牛客暑期多校训练营(第三场) J LRU management 模拟链表操作

    输入n, m,n表示n种操作,m表示最多可以容纳m个串. 第一种操作:先在容器里找是否存在这个串,如果不存在,则添加在末尾,这个串携带了一个值v. 如果存在,则先把之前存在的那个拿出来,然后在后面添加 ...

  7. linux中history加入显示时间命令代码

    source 空格 配置文件,则配置立即生效,这里的soruce也可以用英文状态下的点即“.”代替 历史命令history -w将现在的命令记录写入到history里面 如果在history里面加上时 ...

  8. vue移动端项目在手机上调试

    1.电脑和手机要连同一个wifi  一定是复制无线网的IP,而不是以太网的IP 2.在你的电脑上查找无线网络的ipv4地址: 查找方法:windows+r   然后再输入框里输入cmd 回车 会出现这 ...

  9. 截取字符,超出的用省略号代替js实现 substring

    可用到截取文字过多的问题,取0到6之间的字符,不包含6title.substring(0,6)+'...';

  10. Java Web实现使用浏览器从服务器下载文件(后台)

    Java Web实现 使用浏览器从服务器下载文件. 下面实现两种情况的下载,需求如下: 需求(一):1.用户在页面填写表单. 2.填写完成后,选择下载,将表单内容发往后台. 3.后台根据内容生产一个文 ...