首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Android WebView 踩坑日记,字体怎么突然变小了???

背景 最近,端内在做 webView 统一的时候,个性签名中的 WebView 替换为 CustomWebView 之后,发现字体突然变小。...手机设置字体大小导致h5页面在webview中变形 出现这个问题的原因是 默认浏览器中的内容是不受系统字体大小设置控制的,至少我遇到的几台手机都是这样的情况。...某些机型 WebView 字体的大小是受手机系统字体大小控制的 问题解决方案来自这篇文章:blog.csdn.net/FungLeo/art… 这个通常有两种解决方案。...Web js 网页解决方案 一般,我们动态计算好html的font-size之后,我们就啥都不干了,就走了。...但是,我们现在知道了,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,再去重新获取一下html的font-size,看看实际的这个值,和我们设置的是不是一样。

2K20
您找到你想要的搜索结果了吗?
是的
没有找到

JS 获取浏览器默认字体大小

说是 JS,其实也还是要配合 CSS 使用。 要获取浏览器默认字体大小,我们可以使用 CSS 的 font-size 属性。...将元素的字体大小设置为 medium 可以将其设为浏览器默认大小,通常为16 px。...以下是设置元素字体大小的 CSS 代码示例: .element { font-size: medium; } 一旦将元素字体大小设置为浏览器默认大小,就可以通过 JavaScript 来获取其实际值...下面的代码演示了如何使用 JavaScript 获取浏览器默认字体大小: const measureElement = document.querySelector('.element'); let fontSize...最后,使用 parseInt() 方法将获取到的字体大小值转换为整数。 需要注意的是,如果浏览器默认字体大小被修改,例如在 Chromium 浏览器中将其更改为"特大",则返回值将相应地更改。

3K30

移动端H5知识 - fixed定位模式与其他

另外就是给出网络字体的相关知识,并扯扯美工图设计的基准字体。也算是移动端H5知识这个系列的收尾吧~ fixed定位模式 position:fixed。表示生成绝对定位的元素,相对于浏览器窗口进行定位。...务必需要注意的是fixed是针对浏览器窗口定位,而非父级。...如果美工不靠谱,那很建议你提前跟他沟通一下,以防止1080像素大小下的设计图,字体出现了12、16像素的大小…… 使用rem进行制作的时候,通过JS的控制,rem是设备宽度变化变化的。...如果想在320像素的设备宽度下,保证12像素的字体大小,在宽度1080像素的设备上,字体最少为:12 / 320 * 1080 = 40.5 。也就是最少要设置为42像素的字体大小。...(注意,最小字体是12像素,不能再变小;另外字体大小都需要是偶数)

1.4K50

CSS3着重符及其fallback

FALLBACK 在做fallback时,有这么几点是需要考虑的: 如何应对letter-spacing样式和文字宽度不一致的情况 如何处理浏览器的最小字体配置 如何空间是否足够绘制着重符(计算行高)...二 如果你是用chrome,你可能已经注意到了“最小字体”导致的问题:着重符号太大了。在chrome下着重符号是12px,不是8px(16/2)。为了解决问题2,我们需要想想其他方法。...可惜的是在chrome下zoom:0.5也不能使字体变小。然后考虑到的是transform:scale(0.5),幸运地是它能使文字比最小字体还要小。不过支持的浏览器不够多,参考这里。...虽然不能使着重符号字体变小,但是至少可以保证着重符位置正确。 三 在绘制着重符时,如果行高内有足够的高度,则着重符不会扩大行高。如果高度不够,则扩大行高。...为了做高度是否充足的判断,我们就需要计算字体大小和行高。当你设置字体大小为1em时,对于IE这样的浏览器,获得地长度其实并不是以px为单位。

1.7K20

单屏页面响应式适配玩法

),宽度还是很宽,这时候页面底部的部分文本就会溢出被隐藏掉。...因为高度变矮,内容的尺寸会随之变小页面是 1190 宽,水平居中布局,所以当只改变浏览器宽度的情况下,不会出现宽度变化溢出问题(除非分辨率超大,然后高度居很高,只把宽度缩很小的情况,这个下面会说到)...事实是,rem 缩小到一定值就不会再缩小了,这个跟浏览器字体大小限制为最小 12px 一样,看个例子。 ?...PPPS: 是不是有点坑,应该字体的属性最小值为 12,而其他属性的值没有控制才对 所以,如果使用 rem + vh 方案,在界面缩小到一定尺寸后继续缩小,有些值达到最小值固定不变,而有些值仍在变小,UI...8.2、落地方案,vh + vw + JavaScript 计算 直接在元素的属性值上设置为 vh 或 vw,所有的值都会实时变动,没有最小值(除了属性为字体有最小值),这样就最大程度减少 UI 变乱的情况了

1.9K20

前端自适应方案总结,前端最佳自适应方案

相对于当前对象内(父元素)文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。任意浏览器的默认字体高度16px(16像素)。...所有未经调整的浏览器都符合: 1em=16px。 5.font-size是什么?...所以px是一个绝对单位,css的px大小是由DPR决定的,正常电脑的DPR是1,移动设备则各有不同。 使用px进行自适应时就需要通过@media针对不同的大小进行不同的设置。...例如1920时1vw=1rem,JS监控屏幕大小每次网页加载初始化rem,通过rem可以设置最小字体;通常PC端的最小网页宽度为1100px; 自适应方案思考 1.占满屏幕的页面 这种条件下就可以考虑rem...2.不占满屏幕的网页 这种条件下一班使用固定的px单位,同时两边留白,随着屏幕变小两侧留白也减少,设置的最小屏幕宽度应该等于网页满屏时的宽度。

1.9K30

分享:CSS长度单位:px和pt的区别

试着改变设置,设为72DPI,重启,再打开浏览器看:72px已经等同于72pt了。为什么? 还是再做个实验:分别用800×600和1024×768看刚才的例子,明显高分辨率下,文字就变小。...“屏幕”上的各种信息,包括文字、图片、表格等等,都会屏幕的分辨率变化变化,一个100px宽度大小的图片,在800×600分辨率下,要占屏幕宽度的1/8,但在1024×768下,则只占约1/10。...另外,电脑有其自身的调节性,用户可以自己来调节:1)在浏览器中调节字体大小;2)在刚才提到的显示属性里调节。 那在页面设计中到底是用px还是pt呢?...因为当网页中的字体没有给出实际的px或pt定义的话,会有一个默认值:12pt即16px,对应浏览器中“字体大小”中的“中等”,以这个为标准,变大或缩小。...(只适用于IE,在FF中,即便定义px或pt也都可以变大变小) 所以,从这个概念上看,em才是真正的“相对单位”(百分比嘛,当然是相对),px和pt都是绝对单位(都有固定值)。

2.1K20

更新、重装电脑系统后无法调节亮度、字体缩放异常的解决

本文介绍Windows电脑系统更新或重装系统后,出现屏幕亮度最高且无法调整、电脑字体变小等问题的解决方法。   ...最近(已经是3年前了)更新了Windows 10 20H2版本,更新完毕打开电脑后发现,电脑中各类字体变小了,仿佛就是从一个普通的笔记本电脑变成了大屏幕电脑。   先看系统字体。...再看应用程序字体。点开浏览器,也可以看到字体显著变小,如下图,原本我的书签菜单是刚好到屏幕最右侧的,现在却出现了红色方框中的情况,即多了空白的一块。   ...试了几个型号后,发现其中一个可以使得电脑恢复正常,字体已经恢复原来大小(即右侧那几个文件夹已经是贴着屏幕的右侧边了):   且屏幕亮度也可以正常调整了。至此解决完毕。

11310

第131天:移动web页面的排版与布局

如果屏幕尺寸变小了. html的font-size 也跟着变小. 那么你的图片也跟着等比例变小. 推理下去,有点令人吃惊. html的font-size 一般要 = 750px 了....要么,采用时下流行的表情字体..例如.Entypo字体  所以我在这里建议前端美工们, 一是.尽量采用. 表情字体作为素材蓝本.....(是尽量,不是一定…) 二是.尽量不要将图片和字体形成明显的对比.例如,明显的将图标和字体左右对齐. 三是.能单独用图片的地方尽量只用图片. 四是.为了适应不同宽度的手机. 请尽量少出现左右布局....经过手动测试发现 . target-densitydpi=250 比较适合各类浏览器.  当然更好的办法是. 用js动态去创建viewport 这个标签....可以做到各种手机浏览器的可视尺寸98%一致。  再加上rem的等比缩放功能。 可以说基本上能解决常见的浏览器兼容问题。  不信你可以拿尺子量一下。 如果某款手机不支持mm。 肯定是那款手机有问题。

1.7K10

解决因为手机设置字体大小导致h5页面在webview中变形的BUG

解决因为手机设置字体大小导致h5页面在webview中变形的BUG 首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题。...测试组在一堆手机中测试APP,突然,在某个手机上打开,你的页面布局了乱了,字变大或者变小,总之很奇葩。 你怀疑是APP的问题,但是客户端死活不承认。...你在该手机浏览器中查看,确保没有一毛钱问题,也死活不承认是你的问题。于是测试人员对你俩不死不休的要求修改。...因为默认浏览器中的内容是不受系统字体大小设置控制的,至少我遇到的几台手机都是这样的情况。但是APP不一样,APP是受那个玩意儿控制的!!...问题描述清楚了,出现这个问题,有以下因素 你的页面采用了rem单位,并且是采用js动态计算html的font-size 你的页面被加在了APP中的webview中 这该死的手机被重设了字体大小 解决方法

5.7K71

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

,不同点是响应式的模板在不同的设备上看上去是不一样的,会随着设备的改变改变展示样式,自适应不会,所有的设备看起来都是一套的模板,不过是长度或者图片变小了,不会根据设备采用不同的展示样式,流式就是采用了一些设置...html的字体大小,因为浏览器默认字体大小16px*62.5%=10px。...因为有些浏览器默认的不是16px,或者用户修改了浏览器默认的字体大小(因浏览器分辨率大小,视力,习惯等因素)。...针对这个现象,可以尝试设置html字体为100px,body 修正为16px,这样 0.1rem 就是 10px,body的字体仍然是默认大小,不影响未设置大小的元素的默认字体的大小。...rem布局:改变浏览器宽度,页面所有元素的高宽都等比例缩放,也就是大屏幕下导航是横的,小屏幕下还是横的只不过变小了。

9.8K33

Android开发笔记(一)像素的单位

android支持如下像素单位:px(像素)、in(英寸)、mm(毫米)、pt(磅,1/72英寸)、dp(与设备无关的显示单位)、dip(就是dp)、sp(用于设置字体大小),其中常用的就是px、dp和...dp与物理设备无关,只与屏幕的尺寸有关,一般来说,同样尺寸的屏幕,以dp计量的分辨率都是一样的,不管这个手机是哪个厂家生产,dp大小都一样。...至于sp,其原理跟dp差不多,那为什么说sp专门用于设置字体大小呢?...android手机在系统设置里面可以设置字体的大小(小、普通、大、超大),设置普通字体时,同数值dp和sp的文字看起来是一样大的,但如果设置为大字体,用dp设置大小的文字没有变化,而用sp设置大小的文字就变大了...所以说,dp与系统设置的字体大小没有关系,sp会系统设置的字体大小来变大或者变小

93830

java移动端开发_移动端开发

1.移动端视口问题 视口是指浏览器的可视区域,移动端的视口到底是多宽呢? 现在市面上的大部分手机,比如iphone X,它的默认视口宽度为980px,一个iphone X的屏幕宽度仅仅为375px。...我们可以使用谷歌浏览器的移动端调试工具,来访问百度的搜索结果,可以看到网页明显被缩小了,而且页面宽度定格在980px(不信的话大家可以试试)。...解决方法: 写一段JS代码,应用到网页 !...4.rem rem单位是相对于根元素html字体大小的(如果根元素没有设置字体大小,则相对于基准字号)。现在,根元素的字体大小,正好反映了视口的宽度。...为 1rem = 100px ;如果视口尺寸变小了,比如变成了375,那么根元素的字体大小为(375/1080)*100 = 34.72px ,那么它的宽度为 1rem = 34.72px 。

4.9K20
领券