移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题
一、用户修改手机字体设置大小,影响App里打开的web页面。
手机字体设置大小,影响App的页面。
Android的可以通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放,按照百分百显示。
二、用户调整浏览器字体大小,影响的是从浏览器打开的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);
参考:https://www.cnblogs.com/Han39/p/7803266.html
移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题的更多相关文章
- rem布局,在用户调整手机字体大小/用户调整浏览器字体大小后,布局错乱问题
一.用户调整浏览器字体大小,影响的是从浏览器打开的web页. 浏览器设置字体大小,影响浏览器打开的页面.通过js可控制用户修改字体大小,使页面不受影响. (function(doc, win) { / ...
- 解决手机浏览器上input 输入框导致页面放大的问题(记录)
在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport& ...
- 页面加载后resize页面布局
在我们写web的时候,有的时候页面加载完以后,布局位置有一些问题,手动改变窗口大小后则正常显示位置. 其实,我们手动改变窗口大小,是执行了resize方法. share一下兼容方法: coffee c ...
- CSS3与页面布局学习总结(四)——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- HTML5入门教程:响应式页面布局
摘自:https://www.sohu.com/a/225633935_647584 随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果.此时,一个 ...
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- [css] 浏览器字体和css设置字体之间的关系
原文链接:http://www.zhangxinxu.com/wordpress/2010/06/%E5%8F%AF%E7%94%A8%E6%80%A7%E4%B9%8B%E6%B5%8F%E8%A7 ...
- 微信小程序页面布局之弹性布局-Flex介绍
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新 ...
- C# ASP response.write()弹出提示框后页面布局被打乱
发现在使用了response.write后样式发生了变化,位置和字体都不正确.Response.Write("<script>alert(')</script>&qu ...
随机推荐
- SqlServer,Oracle,db2,MySql查询表索引
SqlServer1. 查询表索引 SELECT 索引名称=a.name ,表名=c.name ,索引字段名=d.name ,索引字段位置=d.colid ,c.status FROM sysinde ...
- Elasticsearch Query DSL 语言介绍
目录 0. 引言 1. 组合查询 2. 全文搜索 2.1 Match 2.2 Match Phase 2.3 Multi Match 2.4 Query String 2.5 Simple Query ...
- Java开发桌面程序学习(11)——javafx 鼠标点击,右击,双击
javafx 鼠标事件 给某个控件设置鼠标点击监听器,三个条件分别判断为单击,右击还是双击 单击判断 event.getButton()==MouseButton.PRIMARY 右击判断 event ...
- 新增SAP到OA接口,OA怎么更新WSDL给PI,怎么选择PI的IP地址(备忘)
1.首先定义个class. 弄完以后可以使用http://IP地址:8088/seeyon/services/sapService?wsdl 进行导出,部署在哪个服务器就用哪个服务器的IP地址 pr ...
- 解决java导入project出现红叉
1.右击,import,选择需要导入的文件组. D:\softwar\seeyon\A8\ApacheJetspeed\webapps\seeyon\WEB-INF\lib 全选,打开,finish ...
- ReSharper激活方法
激活方式选择License Keys. 激活码: MTW881U3Z5-eyJsaWNlbnNlSWQiOiJNVFc4ODFVM1o1IiwibGljZW5zZWVOYW1lIjoiTnNzIElt ...
- go-gtk环境配置
go-gtk环境配置(用于go的图形化界面) 弄了一天,终于把这个环境给搭建好了,差不多就是安装msys2->安装gtk的各个版本->安装mingw(我原来装有但不影响,因为重复了,环境变 ...
- Python打包成exe文件很难?一分钟即可学会,并添加图标!
环境1.python 3.72.pyinstaller下载方式:2.1 python安装(略)2.2 安装pyinstaller打开DOS窗口输入以下命令:pip install pyinstalle ...
- c++ 模板类,方法返回值类型是typedef出来的,或者是auto,那么此方法在类外面如何定义?
c++ 模板类,方法返回值类型是typedef出来的,或者是auto,那么此方法在类外面如何定义? 比如方法max1的返回值是用typedef定义出来的mint,那么在类外如何定义这个方法呢? tem ...
- 渗透测试学习 二十、 其他漏洞汇总之PHP相关漏洞
大纲: PHP相关漏洞 JSP相关漏洞 其他漏洞汇总 PHP相关漏洞 文件包含漏洞 php://input等伪协议利用 代码执行漏洞 变量覆盖漏洞 文件包含漏洞 程序开发人员一般会把重复使用的函数写到 ...