一、用户修改手机字体设置大小,影响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布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题的更多相关文章

  1. rem布局,在用户调整手机字体大小/用户调整浏览器字体大小后,布局错乱问题

    一.用户调整浏览器字体大小,影响的是从浏览器打开的web页. 浏览器设置字体大小,影响浏览器打开的页面.通过js可控制用户修改字体大小,使页面不受影响. (function(doc, win) { / ...

  2. 解决手机浏览器上input 输入框导致页面放大的问题(记录)

    在微信手机页面开发当中,页面是没有问题的,但是当焦点在input输入框的时候,手机页面会自动放大. 加入以下代码在head 区,可解决此问题 <meta name="viewport& ...

  3. 页面加载后resize页面布局

    在我们写web的时候,有的时候页面加载完以后,布局位置有一些问题,手动改变窗口大小后则正常显示位置. 其实,我们手动改变窗口大小,是执行了resize方法. share一下兼容方法: coffee c ...

  4. CSS3与页面布局学习总结(四)——页面布局大全

    一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...

  5. HTML5入门教程:响应式页面布局

    摘自:https://www.sohu.com/a/225633935_647584 随着互联网时代的发展,我们对网页布局有了新的要求,大气,美观,能够在不同的设备上呈现令人焕然一新的效果.此时,一个 ...

  6. HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  7. [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 ...

  8. 微信小程序页面布局之弹性布局-Flex介绍

    布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新 ...

  9. C# ASP response.write()弹出提示框后页面布局被打乱

    发现在使用了response.write后样式发生了变化,位置和字体都不正确.Response.Write("<script>alert(')</script>&qu ...

随机推荐

  1. Oracle基础教程(一)

    本文链接:https://blog.csdn.net/GoldenKitten/article/details/84947386 以下内容为转载以上博客,自己做了略微的补充,如需查看原文,请点击上面的 ...

  2. SpringBoot2.0中的事务@Transactional

    在SpringBoot2.0中使用使用需要注意的地方. 1. 加@Transactional的方法不能是private和protected修饰,private会直接报编译错误,protected不会报 ...

  3. SPA项目搭建及嵌套路由

    Vue-cli: 什么是vue-cli? vue-cli是vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,创建命令如下: vue init webpack xxx 注1:xx ...

  4. python+java蓝桥杯ACM日常算法题训练(一)10基础题

    目录 1.简单的a+b 2.第一个HelloWorld程序! 3.三个数最大值 4.密码破译 5.母牛的故事 6.7.8.9.10 @(这里写自定义目录标题) 算法题训练网站:http://www.d ...

  5. centos 安装gitlab

    1.开始安装依赖软件:yum -y install policycoreutils openssh-server openssh-clients postfix 2.设置postfix开机自启动,po ...

  6. HTML常用标签一

    html文本格式化标签 在网页中,有时需要为文字设置粗体 .斜体 或下划线 效果,这是就需要用到HTML中的文本格式标签,是文字以特殊的方式显示 标签语义:突出重要性,比普通文字更重要 语义 标签 说 ...

  7. 从立创EDA,Gratipay看中文编程开发环境和推广运营的一个趋势

    前不久听说立创EDA,对比之前的讨论: 适合中文用户的编程语言和IDE, 侧重于现有语言/IDE不具备的特性 · Issue #11 · program-in-chinese/overview,觉得颇 ...

  8. ElasticSearch安装及运行的坑

    一.确认centos系统是为64位的,x86的不可以安装 1. 下载elasticsearch包 2. 用 tar -zxvf 解压包 3. 增加一个elk用户,elasticsearch7不可用ro ...

  9. MYSQL第一课

    rm-rf /* 不能用 完全删除 数据库不能直接存储数据 table 表 DB 数据库 DBMS 数据库操作系统 SQL 结构化查询语言 语句不区分大小写,但字符串常量区区分大小写.建议命令大写. ...

  10. Ingo Molnar 的实时补丁

    一.简介 Ingo Molnar 的实时补丁是完全开源的,它采用的实时实现技术完全类似于Timesys Linux,而且中断线程化的代码是基于TimeSys Linux的中断线程化代码的.这些实时实现 ...