移动端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 ...
随机推荐
- github上星星1万多的python教程推荐收藏
简单的说,Python是一个“优雅”.“明确”.“简单”的编程语言. 学习曲线低,非专业人士也能上手 开源系统,拥有强大的生态圈 解释型语言,完美的平台可移植性 支持面向对象和函数式编程 能够通过调用 ...
- Zookeeper学习记录及Java客户端连接示例
1. Zookeeper 1.1 简介 ZooKeeper is a centralized service for maintaining configuration information, na ...
- fastdfs详细安装教程
前言 最近开始搞的项目涉及到 fastdfs,工欲善其事,必先利其器,于是我自己搭了一台 fastdfs 服务器.坑已经帮大家都踩过了.按照该教程100%能安装成功. 前期准备 一个centos7 一 ...
- 转 googlenet论文解读
版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/u014061630/article/det ...
- MySQL学习——操作视图
MySQL学习——操作视图 摘要:本文主要学习了使用DDL语句操作视图的方法. 了解视图 是什么 视图是从一个.多个表或者视图中导出的表,包含一系列带有名称的数据列和若干条数据行. 特点 视图不是数据 ...
- JVM垃圾回收器原理及使用介绍
JVM垃圾回收器原理及使用介绍 垃圾收集基础 引用计数法(Reference Counting) 标记-清除算法(Mark-Sweep) 复制算法(Copying) 标记-压缩算法(Mark-Comp ...
- CSS符合选择器
CSS复合选择器 后代选择器 后代选择器又称为包含选择器,可以选择父元素里面的子元素.其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就成为外层标签的后代 元 ...
- 02Javascript变量和数据类型
1. 变量概述 1.1 什么是变量 通俗:变量是用于存放数据的容器. 我们通过 变量名 获取数据,甚至数据可以修改. 1.2 变量在内存中的存储 本质:变量是程序在内存中申请的一块用来存放数据的空间. ...
- DS12C887实时时钟
实物图 引脚定义 GND. VCC:直流电源,其中VCC接+5V输入,GND接地,当VCC输入为+5V时,用户可以访问DS12C887内RAM中的数据,并可对其进行读.写操作:当VCC的输入小于+4. ...
- Mybatis书写
Mybatis设置主键和自增 方法1: <insert id="insert" parameterType="Person" useGeneratedKe ...