安卓下设置系统字体大小影响H5页面布局
问题描述:
调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小,后内嵌H5布局乱掉
问题分析:
因为用户调整了系统字体的大小,修改了根节点和body节点的font-size,而我的单位和字体大小采用的是rem和em,所以根节点与body节点font-size的改变肯定会影响到我的字体的大小和单位长度的展现
问题确认:
初步分析问题后,需要真实的模拟环境,看看是否如我所说,根节点的font-size和body节点的font-size真的改变了,我在页面上面添加一个按钮,点击弹出根节点的font-size和body节点的font-size.经确认,body节点的font-size确实改变了,但是根节点的font-size并没有改变,这确定一个问题,因为我字体采用的是em,em单位自然和body节点的font-size有关,但是我的长度采用的是rem,而rem只和根节点的font-size有关,既然根节点的font-size并没有改变,那为什么我h5里面的长度改变了呢
问题继续查找:
正在我苦思冥想之际,突然发现我的一个元素宽度设置为360px(注意这个时候我的手机也是360px),而这个元素的宽度竟然不是撑满全屏,由此可以推断,当用户修改系统字体大小的时候,回动态修改1px所代表的实际像素。这个就属于系统级的了,如果是安卓app原生开发倒是可以采用dp为单位规避这个问题,但是我们h5只能用px
问题再确认:
首先是两个问题:
1-字体大小改变,因为body节点font-size的变化影响到我以em为单位的字体大小
2-单位长度改变,因为用户调整系统字体大小后,改变了在系统内部1px所代表的实际像素,所以使得我的长度与实际长度不服
问题解决:
如果有一个方法可以使得用户设置字体大小不干扰到我h5内部的字体就好了,果然,安卓提供了一个方法:webview.getSettings().setTextZoom(100),这个方法是设置webview内部字体的缩放比例,而字体单位是px,它其实设置的是px的缩放比例,我们通过强制设置为100%,来使得用户的外部设置干扰不到我们内部webview的字体大小呈现。而因为限制了px的缩放比例,我们的长度也最终得以正常呈现。
注:对于em和ren原理不是很了解的同学可以参考:http://www.cnblogs.com/noobfly/p/6207832.html
安卓下设置系统字体大小影响H5页面布局的更多相关文章
- [Android] 字体使用dp单位避免设置系统字体大小对排版的影响
[Android] 字体使用dp单位避免设置系统字体大小对排版的影响 以魄族mx3为例,在设置->显示->字体大小中能够选择字号大小例如以下图: 图1. 魄族mx3 会导致软件在有固定定高 ...
- rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题
rem在三星s5部分机型情况下 设置的字体大小与手机实际字体大小不一致问题 判断是特殊机型,做特殊处理. var u=navigator.userAgent; if($(window).width() ...
- 解决因为手机设置字体大小导致h5页面在webview中变形的BUG
首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置html的font-size,一切都比较完美. 这时候,你自信满满的 ...
- 因为手机设置字体大小导致h5页面在webview中变形的BUG
出现这个问题,有以下因素 你的页面采用了rem单位,并且是采用js动态计算html的font-size你的页面被加在了APP中的webview中这该死的手机被重设了字体大小解决方法一般,我们动态计算好 ...
- 移动端rem布局,用户调整手机字体大小或浏览器字体大小后导致页面布局出错问题
一.用户修改手机字体设置大小,影响App里打开的web页面. 手机字体设置大小,影响App的页面.Android的可以通过webview配置webview.getSettings().setTextZ ...
- Android: 设置 app 字体大小不跟随系统字体调整而变化
在做 app 内字体大小的需求,类似于 微信中设置字体大小. 那么就需要 app 不跟随系统字体大小调整而变化,找到了两个方法. 方法1: 重写 getResource() 方法,修改 configu ...
- Android系统移植与调试之------->如何修改Android默认字体大小和设置里面字体大小比例
因为我修改 ro.sf.lcd_density的值,将它从160修改 为120,所以导致整个系统的字体都变得很小.因此需要将整个字体变大,并且在设置-->显示-->字体大小的4个选项的值都 ...
- Android重写getResources规避用户调整系统字体大小影响Android屏幕适配
Android屏幕适配一直是一个头疼的问题.除此之外还要考虑APP在实际应用场景中,用户千奇百怪的设置,最常见的用户设置行为就是设置手机的字体大小,比如把字体设置成超大或者超小,这对屏幕适配又带来额外 ...
- 设置同样字体大小,chrome浏览器有时字体偏大的解决办法(转)
本文是找了在网上搜了好久才找到非常棒的一篇文章,很好的解决了这个问题. 原文地址:https://github.com/amfe/article/issues/10 这个特性被称做「Text Auto ...
随机推荐
- vsCode如何从github拉取项目
最近刚使用vscode,有些操作还不太会,所以记录下. 1.开vscode使用CTRL+`或者点击查看到集成终端打开控制终端. 2.在终端中cd到存放文件夹下面,然后git clone https:/ ...
- 更新Xcode10与iOS12 遇到的bug:library not found for -lstdc++.6.0.9
更新Xcode10与iOS12 遇到的bug:library not found for -lstdc++.6.0.9 解决办法:删除pod里导入的库文件,跑一下pod,再重新导入这些库文件,跑pod ...
- Vue Watch 的原理 和 $nextTick() 通俗理解
网上watch和$nextTick()解释比较复杂,涉及到promise,h5的dom发生变化的新api等复杂代码,下列就是两个参考. [watch原理] [$nextTick()] 首先,看遇到问题 ...
- IIS支持apk文件
随着智能手机的普及,越来越多的人使用手机上网,很多网站也应手机上网的需要推出了网站客户端,.apk文件就是安卓(Android)的应用程序后缀名,默认情况下,使用IIS作为Web服务器的无法下载此文件 ...
- Redis入门到高可用(十四)—— bitmap
一.初步认识 二.API 1.setbit 2.getbit 3.bitcount 4.bitop 5.bitpos 三.位图使用 四. 使用经验
- Ethzasl MSF源码阅读(1):程序入口和主题订阅
关于IMU融合知乎上的一篇问答:有哪些开源项目是关于单目+imu做slam的? Ethz的Stephen Weiss的工作,是一个IMU松耦合的方法. 1.程序入口:ethzasl_msf\msf_u ...
- cds view 创建和调用
cds view 是一个core data service, 能够将数据库表虚拟化为一个虚拟表(double).因为各个使用sap的公司,使用的数据库数据是不同的,所以提供一个数据库的虚拟. 通过向 ...
- day014 模块
# 1.用于多种语言交互 编程语言通用数据 # 内置的 不需要安装 直接导入使用 import json # 导入一个json模块 # dumps loads# dump load 有持久化的功能 # ...
- spring重要知识点总结
一.面向切面编程 配置applicationContext.xml文件 <beans xmlns="http://www.springframework.org/schema/bean ...
- Oracle数据库基础入门《二》Oracle内存结构
Oracle数据库基础入门<二>Oracle内存结构 Oracle 的内存由系统全局区(System Global Area,简称 SGA)和程序全局区(Program Global Ar ...