rem布局,在用户调整手机字体大小/用户调整浏览器字体大小后,布局错乱问题
一、用户调整浏览器字体大小,影响的是从浏览器打开的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布局,在用户调整手机字体大小/用户调整浏览器字体大小后,布局错乱问题的更多相关文章
- 移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题
一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面.Android的可以通过webview配置webview.getSettings().setTextZ ...
- phpStorm字体大小无法调整, 怎么办?
最近上手了一款轻量级IDE phpStorm,可是就在调整编辑器字体大小时却遇到问题了, 发现字体大小无法调整,另外还有字体大小往左还有个“√”,始终无法去掉,这个勾限制了字体系列,就可怜巴巴的那几个 ...
- Quartus中代码字体大小的调整方法
Quartus中代码大小的调整方法 网友 "一纸玫瑰"整理 第一步:点击Tools(工具) 第二步:点击Options(选项) 第三步:Text Editor(文本编辑)/Font ...
- css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位
css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...
- 网页设计之字体和 CSS 调整
调整 CSS 首先,我们先来看看问题的源头.CSS 的出现曾是技术的一大进步.你可以用一个集中式的样式表来装饰多个网页.如今很多 Web 开发者都会使用 Bootstrap 这样的框架. 这些框架当然 ...
- 83 parrted-分区和分区大小的调整
parted命令是由GNU组织开发的一款功能强大的磁盘分区和分区大小调整工具,与fdisk不同,它支持调整分区的大小.作为一种设计用于Linux的工具,它没有构建成处理与fdisk关联的多种分区类型, ...
- cacti气象图调整(批量位置调整、更改生成图大小等)
cacti气象图能够非常直观的看到各个节点的流量.这里用的是CactiEZ中文版 V10 1.调整气象图大小 默认有一个1024像素的背景图可选, 这里我们须要新增一个1600像素的背景图. 背景图自 ...
- iOS开发笔记-根据frame大小动态调整fontSize的自适应文本及圆形进度条控件的实现
最近同样是新App,设计稿里出现一种圆形进度条的设计,如下: 想了想,圆形进度条实现起来不难,但是其中显示百分比的文本确需要自适应,虽然可以使用时自己设定文本字体的大小,但是这样显得很麻烦,也很low ...
- 微信小程序如何下载超过大小限制(10M)的视频?(苹果用户仔细看,安卓用户快速看)
众所周知,微信小程序对下载的文件大小有限制,目前是最大支持10M.我们在用去水印小程序保存视频的时候,如果遇到长视频,视频大小可能就超过限制.遇到这种情况,我们如何才能把视频保存到手机相册呢? 首先, ...
随机推荐
- codeforces 597 div2 E. Hyakugoku and Ladders(概率dp)
题目链接:https://codeforces.com/contest/1245/problem/E 题意:有一个10x10的网格,左下角是起点,左上角是终点,从起点开始,如图所示蛇形走到终点,每一步 ...
- Sass&Scss入门 选择器 混合器 导入 条件判断 迭代
Sass 基于ruby的一种将脚本解析成CSS的脚本语言.也可以说是一种预处理语言. Sass在css的语法基础上增加了变量.嵌套.混合.继承.导入等高级功能. 使用Sass与Sass样式库(如com ...
- Codeforces Round #604 (Div. 2)D(构造)
构造,枚举起点,如果一个序列成立,那么将它reverse依然成立,所以两个方向(从小到大或从大到小)没有区别,选定一个方向进行探测,直到探测不到以后回头,只要所给数据能成立,那么能探测进去就能探测出来 ...
- Navicat Premium 12安装、激活
Navicat Premium 12安装 Navicat Premium 12激活
- 流式计算(三)-Flink Stream 篇一
原创文章,谢绝任何形式转载,否则追究法律责任! 流的世界,有点乱,群雄逐鹿,流实在太多,看完这个马上又冒出一个,也不知哪个才是真正的牛,据说Flink是位重量级选手,能流计算,还能批处理, 和其他伙 ...
- css与js基础
CSS样式 1 宽高设置 块元素可使用 wid 1字体 font-family : 文本类型 font-size 字体大小 font-style 字体样式 斜体italic 正常norm ...
- Django框架之ORM常用字段
一.ORM介绍 1.ORM概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过 ...
- Mybatis 元素类型为 "resultMap" 的内容必须匹配 "(constructor?,id*,result*,association*,collection*,discriminat
<resultMap id="BaseResultMap" type="com.youotech.tl_cons_credit_rating.entity.TL_C ...
- (VLAN)理解Hybrid接口的应用
实验三:理解Hybrid接口的应用 实验原理: 实验内容: 某企业二层网络使用两台S3700交换机S1和S2,且两台设备在不同的楼层.网络管理员规划了3个不同VLAN, HR部门使用VLAN 10,市 ...
- php头像上传插件
最近找到了一个比较简单实用的php头像上传插件,兼容IE8及以上等主流浏览器,分享给大家.效果如下: 1.首页效果图:默认显示默认图片. 2.点击图片(拥有裁剪框,可以拖动.缩放.裁剪头像等功能,注意 ...