安卓手机系统设置字体大小后与APP以及web端字体大小问题

最新推荐文章于 2023-06-01 16:36:02 发布
最新推荐文章于 2023-06-01 16:36:02 发布
阅读量1w 收藏 2
点赞数 1
分类专栏： 安卓初级 文章标签： android web服务 html 手机系统 开发人员
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ONLYMETAGAIN/article/details/53689301
版权

安卓手机系统设置字体大小后与APP以及web端字体大小问题

最近在做一些有关html和App的一些混合式开发，在测试过程中发现，android手机系统设置了字体大小，app应用中和web服务端的页面（也就是html界面）字体都会有变化。下面我就在这次开发者中遇到的相关问题进行一个小小的总结。

1.情况发生，设置系统字体之后的前后对比
这里写图片描述
这里写图片描述
是不是发现字体变化还是很大的呢！

web端html和入app中，有些会出现兼容问题，有些机子并不会出现兼容问题。实际开发中，对于android的同学来说，只要有超过三种有这种问题就需要进行解决这个问题。小编在网络上找了很多的资料，发现，网络就是一个大杂烩，什么都有，但是有用的却很少，如何解决这个问题呢？其实并没有那么麻烦。

2.问题研

最低0.47元/天 解锁文章
CherryChen88
关注
专栏目录
android webview 字体被放大,解决因为手机设置字体大小导致h5页面在webview中变形的BUG...
weixin_34015347的博客
05-25 3410
解决因为手机设置字体大小导致h5页面在webview中变形的BUG首先，我们做了一个H5页面，在各种手机浏览器中打开都没问题。我们采用了rem单位进行布局，通过JS来动态计算网页的视窗宽度，动态设置html的font-size，一切都比较完美。这时候，你自信满满的将h5地址交给了APP工程师，做了一个WEBVIEW嵌套，然后就顺利交工了。测试组在一堆手机中测试APP，突然，在某个手机上打开，你的页...
android设置系统文字大小后App的文字会变化
lixiaoshuai_91的博客
09-28 1680
对于程序员来说，我们很少会去设置手机的字体大小，因此也不会出现设置字体后App界面变化。 但是近期由于我们开发的项目中嵌套的H5页面太多，很多手机适配都没有问题，唯独有一款红米Note2在加载H5页面后变的面目全非，后来又采购了一台红米note2适配是没有问题的。经过排查原因是，最初的红米note2字体设置为大号字体。因此导致了原来的字体（sp）都会放大1.2倍，使界面不是预期的了。 经过一番
安卓下设置系统字体大小影响H5页面布局
weixin_30266829的博客
05-04 729
问题描述: 　　调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小，后内嵌H5布局乱掉 问题分析： 　　因为用户调整了系统字体的大小,修改了根节点和body节点的font-size,而我的单位和字体大小采用的是rem和em，所以根节点与body节点font-size的改变肯定会影响到我的字体的大小和单位长度的展现 问题确认： 　　初步分析问题后,需...
手机系统设置字体大小影响h5页面字体
weixin_39838986的博客
03-17 8792
问题描述： 1、我们的h5页面是嵌入到app里面，用webview实现浏览器打开的 2、在手机浏览器打开没有问题 原因： 安卓的webview会出现这个问题，因为webview是手机内置浏览器的sdk封装出来的组件，因此会受手机系统的影响，但是ios的webview不会出现这个问题。 解决方法： 1、同时经过测试发现我们用document.documentElement.html.st...
Android打开H5界面： 字体大小适配问题处理-h5字体太小
Jason_996的博客
03-03 3269
标题 处理适配方案一： https://stuff.mit.edu/afs/sipb/project/android/docs/guide/webapps/targeting.html 通过对H5页面添加这个设置（只有Android系统自带的webview带这个功能） <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width"/> 这样设置后h5就可以获取到原...
设置App字体大小不随系统设置改变
Axe_Ishmael
03-27 4424
*最近在开发中遇到一个问题，TextView设置的字体会随手机系统设置的字体大小而更改，造成在XML文件中设置为居中的文字不居中。 解决方法有两种: 1.将文字大小设置为dp或者dip 但是Google推荐使用sp作为单位，所以会有黄线警告 2.将你所有Activity继承的BaseActivity(假如你是通过这种方法的话),重写BaseActivity的public Resources ...
移动端字体放大问题的研究
weixin_34150224的博客
10-30 574
本文同步发布于富途web开发团队博客 futu.im/article/mob… 问题背景 很多webview提供了调整页面字体大小的功能，例如手机QQ、微信、部分Android内置浏览器等。大部分浏览器调整字体只会导致字体显示大小发生改变，其他元素的大小不受影响。但对于结构稍微复杂一点的页面，字体大小的变动就足以导致页面布局乱掉，导致文本不居中、文字折行、布局混乱等问题。 24-mobile-...
android 系统字体无效,android内嵌H5页面，字体设置失效的问题
weixin_39861255的博客
05-25 1027
首先说明一下问题存在的情况：androidApp上内嵌了一个前端的h5系统公告页面，这个页面是更具一个模板H5页面生成的。具体如何生成的我不清楚(本人是前端)。然后生成过后，我直接本地打开页面如下：字体大小很正常，符合预期，然后在app上打开效果如下：如上图对比。我试了各种方法，都无法解决这个字体变小的问题…另外，貌似在ios上面又特么是正常的。我在模板也面上也加了一些比较常见的适配的东西(主要就...
android开发用什么字体,移动端web app和页面开发使用什么字体？微软雅黑？
weixin_29044157的博客
05-28 1339
一直不清楚移动端web app和页面用的什么字体，只是觉得类似微软雅黑，直到有一次设计师问到设计移动web页面该用什么字体才严肃地想起这个问题。三大手机系统IOS、android、winphone支持的字体ios 系统默认中文字体是Heiti SC默认英文字体是Helvetica默认数字字体是HelveticaNeue无微软雅黑字体android 系统默认中文字体是Droidsansfallbac...
webapp字号大小跟随系统字号大小缩放的示例代码
01-19
本来一切都很好，可是吧，领导说客户有的年纪大 ，看不清字体，希望网页字体可以跟随系统字号大小变化。当时心里真是…，然无奈只能想办法解决问题，网上搜罗一圈都是禁止内部跟随系统字号变化，看来只能自己搞了。 ...
android 界面布局 web,移动端页面布局及字体大小该如何设置
weixin_33936111的博客
05-27 340
之前发过一篇文章《移动端应该如何动态设置字体大小？》，主要说了移动web端布局的一些解决方法，本文再一次把这个问题提出来，并分别对安卓和IOS设备的屏幕了解做出自己的分享，在进入正文之前最好先了解：物理像素、逻辑像素、DPR和Rem。那么进入正文，不废话，直接把自己了解到的和一些看法说出来。首先是屏幕问题，现在主流的移动设备以安卓和IOS为主，我们在制作移动端页面也是以兼容这两种设备去布局。首先说...
禁用安卓系统字体大小
谢伟光的博客
08-22 428
webview 由于用户的设置系统字体为特大，导致排版错乱 解决办法如下 webview设置属性 WebSettings set = webview.getSettings(); set.setTextZoom(100);
关于Android切换系统字体大小和字体样式导致App崩溃或者界面错乱的问题
libo0878的专栏
10-21 8737
一.发现问题 问题：最近公司测试同学，在无意间调整系统字体大小的之后把app从后台切换到前台，发现app crash。 查阅了一些资料，发现在app中文字标注的单位为sp。当系统字体大小发生变化的时候sp的度量标准发生了变化，这个时候，系统会给app发送一个通知，告诉它配置已经变了，需要重新刷新界面。类似的操作就像是横竖屏切换，在onConfigurationChanged()方法里面进行需要...
关于移动端APP开发-字体样式变大问题
weixin_30564901的博客
07-12 674
前两天在写App项目的时候发现一个问题，就是明明css写的样式是14px，刚开始在页面显示时并未出现问题，可是内容一多，字体突然变大了。 what？，不明所以，在各大网站上找了好久才知道是浏览器的字体提升的问题。 先说说解决的方法吧，可以直接在css样式中写下 body,body*{ Max-height:1000000px; } 　就可以直接禁用。 　出现这一原...
android设置输入框输入字符限制,如何在Android中为EditText设置最小和最大字符限制？...
weixin_42236938的博客
05-25 940
我想为EditText框设置最小和最大输入值.我正在为EditText创建一个简单的验证;它需要A-Z和0-9值,最小值为5,最大值为8.我设置了最大值和其他验证如下：android:id="@+id/edittextKode_Listing"android:layout_width="match_parent"android:layout_height="wrap_content"android...
Android APP字体大小跟随系统设置
BridgeGeorge
11-22 8879
项目适配遇到的问题，在Android 4.0以上的系统当中，用户能够在系统设置对字体大小进行更改,这样一来，在自己的应用当中由于字体大小的变化会导致显示不全，布局错乱等问题的存在。这个设置直接会影响到所有sp为单位的字体适配，所以很多app在设置了系统字体后瞬间变得面目全非。虽然google推荐使用sp作为字体的单位，但实际的开发过程中通常是根据UI的设计稿来换算 sp(px换算sp)。而sp即使在
android设置字体大小显示比例（和系统显示设置一样）
一个草根敲键盘的故事
06-01 817
在activity类里添加，其他组件类需要传入activity。
Android输入框限制中文,android下文本框输入限制最大字节数
weixin_36135382的博客
05-28 239
android上文本框输入限制最大字节数public class MaxByteLengthEditText extends EditText {private int maxByteLength = 100;private String encoding = "GBK";public MaxByteLengthEditText(Context context) {super(context);i...
uniapp的app.vue的onLaunch中 document.documentElement.style.fontSize 设置了字体大小， 但是这个框架又给我把字体大小改成16px了， 如何在我这了字体大小之后 不让他修改
最新发布
09-13
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，它允许开发者编写一次代码，然后发布到iOS、Android、Web（包括微信小程序）等平台。在 uni-app 中，`app.vue` 是应用的根组件，而 `onLaunch` 是生命周期钩子，用于应用启动之后执行。 在 `onLaunch` 中设置 `document.documentElement.style.fontSize` 是为了定义应用的基本字体大小。但有时候，uni-app 内部可能在某些阶段重新设置了文档的字体大小，比如为了适配不同屏幕或者是为了满足一些默认样式的要求。 如果你在 `onLaunch` 中设置了字体大小后发现被覆盖，你可以尝试以下方法来解决： 1. **使用 `:root` 伪类变量**： 在 CSS 中使用 `:root` 伪类来设置一个全局变量，这样可以在整个应用中统一修改字体大小。 ```css :root { --fontSize: 20px; /* 设置一个自定义的变量 */ } ``` 然后在 `onLaunch` 中使用 JavaScript 来动态设置根元素的样式： ```javascript onLaunch: function() { document.documentElement.style.setProperty('--fontSize', '20px'); } ``` 在其他样式表中使用这个变量： ```css body { font-size: var(--fontSize); } ``` 2. **使用 vue.config.js 配置**： 在项目的 `vue.config.js` 文件中添加自定义的 CSS 预处理器，这样可以在全局范围内覆盖默认的样式。 ```javascript module.exports = { css: { loaderOptions: { postcss: { plugins: [ require('postcss-pxtorem')({ rootValue: 16, // 默认根字体大小 propList: ['*'] // 需要转换的属性 }) ] } } } } ``` 3. **使用 `hid` 属性**： 在 `App.vue` 中为 `manifest.json` 添加 `config` 字段，并使用 `hid` 属性来禁止系统默认样式： ```javascript { "app-plus": { "deviceReadyInit": true, "hardwareBackButton": false, "fullScreen": true, "statusBar": { "titleNView": false }, "distributeBackgroundAssets": false, "subNVues": { "default": "auto", "multiWindow": { "enable": true, "waiting": true } }, "config": { "titleBar": false, "statusbar": false, "navBar": false, "statusBarColor": "#ffffff", "hardwareAccelerated": true, "renderer": "webview" } } } ``` 请注意，以上方法可能需要结合你的实际项目情况调整。如果问题依旧存在，可能需要检查是否有其他框架或插件在内部修改了样式。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值