因为手机设置字体大小导致h5页面在webview中变形的BUG
出现这个问题,有以下因素
你的页面采用了rem单位,并且是采用js动态计算html的font-size
你的页面被加在了APP中的webview中
这该死的手机被重设了字体大小
解决方法
一般,我们动态计算好html的font-size之后,我们就啥都不干了,就走了。但是,我们现在知道了,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,再去重新获取一下html的font-size,看看实际的这个值,和我们设置的是不是一样。如果不一样,就要根据比例再设置一次。
以下是我的完整代码:
function htmlFontSize(){
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var width = w > h ? h : w;
width = width > 720 ? 720 : width
var fz = ~~(width*100000/36)/10000
document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz +"px";
var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace('px','')*10000)/10000
if (fz !== realfz) {
document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) +"px";
}
}
解决方法二:
解决办法:安卓客户端通过webview配置webview.getSettings().setTextZoom(100)就可以禁止缩放,按照百分百显示。
因为手机设置字体大小导致h5页面在webview中变形的BUG的更多相关文章
- 解决因为手机设置字体大小导致h5页面在webview中变形的BUG
首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html的font-size,一切都比较完美. 这时候,你自信满满的 ...
- 安卓下设置系统字体大小影响H5页面布局
问题描述: 调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小,后内嵌H5布局乱掉 问题分析: 因为用户调整了系统字体的大小,修改了根节点和body节点的font-siz ...
- rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题
rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题 判断是特殊机型,做特殊处理. var u=navigator.userAgent; if($(window).width() ...
- 【转】CSS3的REM设置字体大小
rem 长度单位 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: ...
- CSS3的REM设置字体大小
在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...
- Android: TextView 及其子类通过代码和 XML 设置字体大小的存在差异的分析
原因: 在代码中通过 setTextSize(float size) 设置,使用的是 sp 为默认单位. 而 XML 中使用了 px,所以需要使用先把做好 sp 和 px 的转换工作. 最近在做 ap ...
- Android Studio升级到0.8.1后怎样设置字体大小?
升级到0.8.1后.打开设置字体大小页面.你会发现无论是Default还是Darcula,都不同意你改变字体的大小.事实上这个是由于这两个模式是Android Studio自带模式,所以不同意你修改, ...
- eclipse怎么设置字体大小
eclipse怎么设置字体大小
- 【转】eclipse怎么设置字体大小
原文网址:http://jingyan.baidu.com/article/f96699bb9442f3894e3c1b15.html 1. 打开eclipse,找到window 2. 点击后在下拉 ...
随机推荐
- 如何在Apache HttpClient中设置TLS版本
1.简介 Apache HttpClient是一个底层.轻量级的客户端HTTP库,用于与HTTP服务器进行通信. 在本教程中,我们将学习如何在使用HttpClient时配置支持的传输层安全(TLS)版 ...
- 【Java数据结构与算法】简单排序、二分查找和异或运算
简单排序 选择排序 概念 首先,找到数组中最小的那个元素,其次,把它和数组的第一个元素交换位置(如果第一个元素就是最小的元素那么它就和自己交换).再次,在剩下的元素中找到最小的元素,将它与数组的第二个 ...
- 刚刚进公司不会SVN 菜鸟感觉好蛋疼-----------SVN学习记
这篇文章源于6月份给公司新人作的关于SVN使用的培训,转眼已经过了几个月的时间,丢了也怪可惜的,于是整理出来希望能够帮助后来人快速入门. 转载:https://blog.csdn.net/maplej ...
- 字典get方法和setdesault方法,统计message中各元素的出现频次
message= 'There are moments in life when you miss someone so much that you just want to pick them fr ...
- 【每日算法】存在重复元素 II
题目描述 这是 LeetCode 上的 219. 存在重复元素 II, 难度为 [简单] 给定一个整数数组和一个整数 k,判断数组中是否存在两个不同的索引 i 和 j,使得 nums [i] = nu ...
- 第1天 Mark Down 学习及DOS命令
Markdown学习 标题 "#加空格"几个#就表示几级标题 字体 helloworld!一两个两个*号 helloworld!一边一个*号 helloworld! 一边三个号 h ...
- Python如何将py文件打包成exe
安装pyinstaller 打开cmd窗口,输入pip install pyinstaller,命令行输出successfully表示成功. 生成exe文件 一.单个py文件 在py文件目录下,打开c ...
- 新建一个DJango项目
好长时间没有用过DJango了,都忘记了怎么使用,哈哈哈,看到一篇讲的很好的博客,直接附链接了. https://blog.csdn.net/woo_home/article/details/9645 ...
- frameset框架在.net网站中的小实现。
一般我们生成网页,为减少代码的开发量,通常将不变的网页部分进行重用.通用为三种方法: 1.frameset框架 2.用户自定义控件 3.母版页(消耗资源大,不追叙) 通常1,2两种方法常用. 1.fr ...
- GC Roots包含哪些
1.虚拟机栈中引用的对象 2.方法区中静态属性.常量引用的对象 3. 本地方法栈中引用的对象 4. 被Synchronized锁持有的对象 5. 记录当前被加载类的SystemDictionary 6 ...