h5 嵌入安卓，字体大小异常

最新推荐文章于 2024-08-06 09:51:20 发布

创作中心

最新推荐文章于 2024-08-06 09:51:20 发布

阅读量552

点赞数 3

本文链接：https://blog.csdn.net/weixin_41706307/article/details/134511339

版权

本文介绍了在安卓机通过webview嵌入H5页面时遇到的字体异常问题，提供了两种解决方案：一是通过添加viewportmeta标签调整设备宽度和密度；二是让原生app跟随系统字体设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安卓机通过webview 嵌入开发的h5页面，测试安卓app。个别手机字体异常，几经查找方法 亲测有效

方法一

body中增加下面标签

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

方法二

查看手机系统目前字体大小，调整成默认大小即可。就解决了，这个需要原生app设置是否跟随系统字体。

异常效果

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

创作中心

关注关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

CherryChen

12-16

1万+

安卓手机系统设置字体大小后与APP以及web端字体大小问题最近在做一些有关html和App的一些混合式开发，在测试过程中发现，android手机系统设置了字体大小，app应用中和web服务端的页面（也就是html界面）字体都会有变化。下面我就在这次开发者中遇到的相关问题进行一个小小的总结。1.情况发生，设置系统字体之后的前后对比是不是发现字体变化还是很大的呢！web端html和入app中

android 系统字体无效,android内嵌H5页面，字体设置失效的问题

weixin_39861255的博客

05-25

1146

首先说明一下问题存在的情况：androidApp上内嵌了一个前端的h5系统公告页面，这个页面是更具一个模板H5页面生成的。具体如何生成的我不清楚(本人是前端)。然后生成过后，我直接本地打开页面如下：字体大小很正常，符合预期，然后在app上打开效果如下：如上图对比。我试了各种方法，都无法解决这个字体变小的问题…另外，貌似在ios上面又特么是正常的。我在模板也面上也加了一些比较常见的适配的东西(主要就...

4 条评论您还未登录，请先登录后发表或查看评论

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

热门推荐

FungLeo's Blog

06-15

2万+

解决因为手机设置字体大小导致h5页面在webview中变形的BUG首先，我们做了一个H5页面，在各种手机浏览器中打开都没问题。我们采用了rem单位进行布局，通过JS来动态计算网页的视窗宽度，动态设置html的font-size，一切都比较完美。这时候，你自信满满的将h5地址交给了APP工程师，做了一个WEBVIEW嵌套，然后就顺利交工了。测试组在一堆手机中测试APP，突然，在某个手机上打开，你的页面

微信h5禁止微信内置浏览器调整字体大小

日常分享

10-09

683

1.ios 通过重写样式控制： body { /* IOS禁止微信调整字体大小 */ -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; -moz-text-size-adjust: 100% !important; } 2.android 通过重写事件控制： <script> (fu..

手机系统设置字体大小影响h5页面字体

weixin_39838986的博客

03-17

9592

问题描述： 1、我们的h5页面是嵌入到app里面，用webview实现浏览器打开的 2、在手机浏览器打开没有问题原因：安卓的webview会出现这个问题，因为webview是手机内置浏览器的sdk封装出来的组件，因此会受手机系统的影响，但是ios的webview不会出现这个问题。解决方法： 1、同时经过测试发现我们用document.documentElement.html.st...

Android打开H5界面： 字体大小适配问题处理-h5字体太小

Jason_996的博客

03-03

3619

标题处理适配方案一： 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就可以获取到原...

h5在ios端app中嵌套字体异常放大

weixin_45730243的博客

09-13

456

【代码】h5在ios端app中嵌套字体异常放大。

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

weixin_35809867的博客

05-26

3956

适用于MCU 1.4的Qt发布：解决嵌入式系统常见问题

qq_42444778的博客

09-30

1005

从今天开始，新的适用于MCU的Qt将在Qt安装程序中提供。如果您不熟悉Qt，可以在此处尝试。1.4版引入了一个新的字体引擎，该引擎可以显示更多文本，而不会占用大量内存。该版本还包括API改进和错误修复，从而增强了可用性和稳定性。您可以在更改日志中找到更改的完整列表，该列表可在联机文档中找到。继续阅读以获取有关主要新功能的更多信息。新特点借助用于MCU 1.4的Qt，解决了设计在微控制器上运行的嵌入式系统时通常要考虑的主要问题：内存占用量。这些系统中通常可用的有限数量的RAM通常会对在GUI端可以

手机改变系统字体大小导致h5页面在webview中变形。。h5页面嵌入webview中，在有些手机上布局乱套的bug。。

杜鲁阳的博客

03-26

3925

解决因为手机设置系统字体大小导致h5页面在webview中变形的BUG 说实话，遇到这个问题，我内心里是崩溃的，表面还一副镇定自若的模样，事实上受到了一万点打击，我做的页面完美适配，就那一台手机，就那一台，整体都是乱的。然后发现那台手机所有的字体都特别大，像是老年机，这时尝试去查看系统字体大小，发现设置比标准大了两个度【超小–标准–大--超大–巨大，就是五个程度，具体什么字不想看了，要吐...

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

weixin_34015347的博客

05-25

3596

uniapp开发框架 —— 处理H5字体兼容性问题

weixin_45734165的博客

06-26

473

uniapp H5打包发布后在部分手机字体无故变大，导致页面错乱，字体都是使用upx(rpx)单位的(这个不是问题原因)，在电脑的浏览器和微信开发者工具上各种机型测试页面都是正常的。最后使用多个手机型号测试后，发现这个与手机型号无关，与微信设置的字体大小有关系。字体无故变大，导致页面错乱的手机都是把微信字体设置了非标准大小字体的手机。查看微信字体大小：打开微信 → 我 → 设置 → 通用 → 字体大小。在App.vue的代码修改成一下代码(安卓手机)在App.vue的代码修改成一下代码(苹果手机)

h5网页嵌套安卓苹果APP内微信内打开H5等遇到的各种适配问题与解决方案汇总 --持续更新

Beatingworldline的博客

08-06

1439

在站外拉起APP 可以用UniversalLinks。在站外拉起APP 可以用scheme协议。微信内可以借用友盟封装uslink实现。微信内可以借用应用宝实现。

微信H5适配解决微信调整字体大小导致H5页面混乱

D_evin_的博客

05-15

1454

ios通过添加css属性，安卓通过微信属性去阻止，页面图片大小最好使用max-width、max-height或者百分比。

html5 移动端字体问题,踩坑之移动端显示字体大小问题

weixin_33850805的博客

06-23

1443

踩到的第一个坑：最近做一个移动端的h5，一开始拿到设计稿后，发现有几个区域字体换算之后在iphone6上是小于12px的，就有一个问题了，谷歌对小于12px的字体，是不做处理的。按理说，设计上应该要避免类似情况，之前做了很多的页面，还没有小字号的存在，所以准备自己先找找解决办法，不行的话，再沟通一下。查找发现网上基本都是需要使用· transform:scale()来解决，并配合 transf...

安卓下设置系统字体大小影响H5页面布局

weixin_30266829的博客

05-04

778

问题描述: 　　调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小，后内嵌H5布局乱掉问题分析：　　因为用户调整了系统字体的大小,修改了根节点和body节点的font-size,而我的单位和字体大小采用的是rem和em，所以根节点与body节点font-size的改变肯定会影响到我的字体的大小和单位长度的展现问题确认：　　初步分析问题后,需...

H5字体大小不受用户手机设置影响的方法

weixin_43988116的博客

08-11

3988

前言：在做H5页面的时候，发现在安卓手机字体出现了排版错乱，且字体变的异常的大，原因是微信设置了字体放大，导致H5页面的字体也变大了。在index.html里添加一个script标签，把以下代码添加进去，即可让页面不受手机设置影响。简单记录如有问题或更优解还请不要吝啬的分享出来，此结。

Android UI总结 Android 和H5 字体大小适配

MatrixMind的博客

01-06

5335

1.Android字体 1. 像素：像素（pixel）为图像的基本单位，是一个抽象的采样。一般作为一个最小的显示单位内置RGB。 2.屏幕尺寸：指屏幕的物理尺寸，一般用屏幕的对角线长度表示 3.宽高比例：屏幕物理尺寸的宽高比，传统手机一般是16:9,4:3，但是全面屏的出现打破了这个局面：三星S8，三星note8，小米mix，LGG6 是 2:1，等都是2:1的手机 4.分辨率：值得是屏...

H5\web轻应用，限制手机系统字体大小对应用的影响方法

不积跬步无以至千里

11-29

1921

在runtime或初始化文件中添加如下代码 // TODO Resize font-size (function(win){ var normalsize = 36; var html = document.getElementsByTagName("html")[0]; var fs = parseInt(getStyle(html, 'fontSize'));

h5嵌入app兼容各个手机样式

最新发布

04-08

<think>嗯，用户想解决H5页面嵌入APP时在不同手机上的样式兼容性问题。首先，我需要回忆一下相关的适配方案。根据提供的引用内容，有几个关键点：比如使用rem适配、处理安全区域、fixed定位的问题，还有不同设备的像素密度问题。首先，rem适配应该是个基础。因为不同设备的屏幕尺寸和分辨率差异大，用rem可以相对根元素字体大小来调整布局。引用[1]提到H5项目用rem适配，通过设置根元素的font-size，然后其他单位用rem，这样可以根据屏幕宽度动态调整。不过可能需要结合viewport设置，比如meta标签里的viewport设置成device-width，这样能更好地响应不同设备。然后是安全区域的问题，特别是iOS的刘海屏和底部横条。引用[4]里提到用constant和env来处理safe-area-inset，这应该是在CSS中添加内边距，避免内容被遮挡。比如在底部fixed的元素上加padding-bottom，使用constant和env函数来获取安全区域的距离。不过要注意兼容性，可能需要同时写两个height属性，一个用constant，一个用env，因为有些旧版本可能不支持env。接下来是fixed和absolute定位的问题。不同手机对fixed的支持可能不一致，尤其是在键盘弹出时，元素的位置可能会错乱。引用[4]建议对fixed元素单独处理，增加内边距。可能需要用CSS的calc函数动态计算高度，结合安全区域的变量。另外，可能需要用JavaScript监听窗口变化，动态调整布局，比如在键盘弹出时重新计算元素位置。还有像素密度的问题，比如Android的dp单位和px的转换。引用[1]里提到dp和px的转换公式，但H5中可能更关注设备像素比（dpr）。使用viewport的initial-scale来控制缩放，或者用媒体查询根据不同的dpr来调整样式。比如，高dpr的设备可能需要更细的边框，用transform: scale(0.5)来实现1物理像素的线条。另外，不同厂商的ROM可能会有不同的默认样式，比如字体大小被调整。这时候需要重置字体，防止用户修改系统字体影响布局。可以用CSS的-webkit-text-size-adjust属性设为none，或者用JavaScript检测字体大小变化，然后强制重置。测试方面，引用[3]提供了一个网址，可以用来查看客户端信息，帮助排查问题。可能需要用真机测试，或者使用浏览器的开发者工具模拟不同设备。此外，使用Flexbox和Grid布局可以提高兼容性，因为它们能更好地适应不同屏幕尺寸。最后，可能需要处理一些特定问题，比如iOS上输入框的样式，或者键盘弹出导致的视口变化。这时候，使用特定的meta标签，或者监听resize事件来调整布局可能会有帮助。比如，在iOS中，键盘弹出可能会改变视口高度，导致fixed元素位置错位，这时候可能需要改用absolute定位，或者动态调整元素的位置。总结下来，解决方案应该包括rem适配、安全区域处理、定位元素调整、像素密度适配、字体重置、弹性布局和充分测试。同时，针对不同平台（iOS和Android）可能需要特定的处理，比如iOS的安全区域和Android的status bar高度差异。</think>### H5页面嵌入APP的跨设备样式适配方案根据引用资料和行业实践，H5页面在APP内出现样式兼容性问题主要由以下原因引起： 1. 不同设备像素密度差异（Android的dp与px转换问题）[^1] 2. iOS安全区域适配（刘海屏、Home Indicator等特殊区域）[^4] 3. 不同ROM对WebView的默认样式处理差异 4. 绝对定位元素在WebView中的异常表现[^4] #### 一、基础适配方案 1. **视口设置** ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` 2. **REM适配** ```javascript // 设置根字体大小为屏幕宽度的1/10 document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px'; ``` 3. **安全区域适配** ```css /* 底部安全区域适配 */ .element { padding-bottom: constant(safe-area-inset-bottom); /* iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* iOS >= 11.2 */ height: calc(60px + constant(safe-area-inset-bottom)); height: calc(60px + env(safe-area-inset-bottom)); } ``` #### 二、特殊问题解决方案 1. **固定定位异常** ```css .fixed-box { position: fixed; bottom: 0; /* 安卓需要增加状态栏高度适配 */ bottom: calc(0px + constant(safe-area-inset-bottom)); bottom: calc(0px + env(safe-area-inset-bottom)); } ``` 2. **1px边框问题** ```css .border-box { position: relative; } .border-box::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #ddd; transform: scaleY(0.5); } ``` 3. **字体大小重置** ```css body { -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } ``` #### 三、调试技巧 1. 使用`https://www.bejson.com/httputil/clientinfo/`检测客户端信息[^3] 2. 安卓WebView开启调试模式： ```java WebView.setWebContentsDebuggingEnabled(true); ``` #### 四、厂商差异处理 | 设备类型 | 重点关注项 | 解决方案 | |---------|-----------|---------| | iOS | 安全区域、弹性滚动 | 使用safe-area-inset变量 | | 小米 | 字体缩放 | CSS强制设置font-size | | 华为 | 状态栏高度 | JS动态计算高度 | | OPPO | 圆角屏幕 | padding增加安全边距 |