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

于 2023-11-20 16:03:35 发布
阅读量191 收藏 1
点赞数 3
文章标签： android javascript html5 web app webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41706307/article/details/134511339
版权

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

方法一

body中增加下面标签

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

方法二

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

异常效果

在这里插入图片描述

创作中心
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
适用于MCU 1.4的Qt发布：解决嵌入式系统常见问题
qq_42444778的博客
09-30 959
从今天开始，新的适用于MCU的Qt将在Qt安装程序中提供。如果您不熟悉Qt，可以在此处尝试。1.4版引入了一个新的字体引擎，该引擎可以显示更多文本，而不会占用大量内存。该版本还包括API改进和错误修复，从而增强了可用性和稳定性。 您可以在更改日志中找到更改的完整列表，该列表可在联机文档中找到。继续阅读以获取有关主要新功能的更多信息。 新特点 借助用于MCU 1.4的Qt，解决了设计在微控制器上运行的嵌入式系统时通常要考虑的主要问题：内存占用量。这些系统中通常可用的有限数量的RAM通常会对在GUI端可以
android 系统字体无效,android内嵌H5页面，字体设置失效的问题
weixin_39861255的博客
05-25 986
首先说明一下问题存在的情况：androidApp上内嵌了一个前端的h5系统公告页面，这个页面是更具一个模板H5页面生成的。具体如何生成的我不清楚(本人是前端)。然后生成过后，我直接本地打开页面如下：字体大小很正常，符合预期，然后在app上打开效果如下：如上图对比。我试了各种方法，都无法解决这个字体变小的问题…另外，貌似在ios上面又特么是正常的。我在模板也面上也加了一些比较常见的适配的东西(主要就...
手机字体缩放html,手机系统设置字体大小影响h5页面字体
weixin_34585343的博客
06-27 1330
问题描述：1、我们的h5页面是嵌入到app里面，用webview实现浏览器打开的2、在手机浏览器打开没有问题原因：安卓的webview会出现这个问题，因为webview是手机内置浏览器的sdk封装出来的组件，因此会受手机系统的影响，但是ios的webview不会出现这个问题。解决方法：1、同时经过测试发现我们用document.documentElement.html.style.fonSize获...
html5 移动端字体问题,踩坑之移动端显示字体大小问题
weixin_33850805的博客
06-23 1328
踩到的第一个坑：最近做一个移动端的h5，一开始拿到设计稿后，发现有几个区域字体换算之后在iphone6上是小于12px的，就有一个问题了，谷歌对小于12px的字体，是不做处理的。按理说，设计上应该要避免类似情况，之前做了很多的页面，还没有小字号的存在，所以准备自己先找找解决办法，不行的话，再沟通一下。查找发现网上基本都是需要使用· transform:scale()来解决，并配合 transf...
解决因为手机设置字体大小导致h5页面在webview中变形的BUG
FungLeo's Blog
06-15 2万+
解决因为手机设置字体大小导致h5页面在webview中变形的BUG首先，我们做了一个H5页面，在各种手机浏览器中打开都没问题。我们采用了rem单位进行布局，通过JS来动态计算网页的视窗宽度，动态设置html的font-size，一切都比较完美。这时候，你自信满满的将h5地址交给了APP工程师，做了一个WEBVIEW嵌套，然后就顺利交工了。测试组在一堆手机中测试APP，突然，在某个手机上打开，你的页面
手机系统设置字体大小影响h5页面字体
weixin_39838986的博客
03-17 8581
问题描述： 1、我们的h5页面是嵌入到app里面，用webview实现浏览器打开的 2、在手机浏览器打开没有问题 原因： 安卓的webview会出现这个问题，因为webview是手机内置浏览器的sdk封装出来的组件，因此会受手机系统的影响，但是ios的webview不会出现这个问题。 解决方法： 1、同时经过测试发现我们用document.documentElement.html.st...
Android打开H5界面： 字体大小适配问题处理-h5字体太小
Jason_996的博客
03-03 3136
标题 处理适配方案一： 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\web轻应用，限制手机系统字体大小对应用的影响方法
不积跬步无以至千里
11-29 1831
在runtime或初始化文件中添加如下代码 // TODO Resize font-size (function(win){ var normalsize = 36; var html = document.getElementsByTagName("html")[0]; var fs = parseInt(getStyle(html, 'fontSize'));
H5页面在安卓字体显示大小与真实大小不一致
叶才鑫
12-11 4105
添加  max-height: 999px;
解决部分安卓机 自带浏览器 上h5页面 rem布局 受到 真机字体影响的问题
weixin_45485922的博客
12-27 1091
h5 适配
H5 页面设置了字体的粗细样式，但是在华为手机里微信打开访问样式不生效？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
06-30 1263
字体样式设置了 ，但是效果出不来 产生这个问题的原因就是自己在华为手机里设置了字体：选择默认即可，然后去微信里面打开页面，为了让默认字体生效，我的操作是找到微信的关怀模式，先开启然后再关闭，再打开页面。最后样式就正常了：......
自定义字体图标android h5不适配,h5页面字体图标显示不正常
weixin_39669163的博客
05-25 358
问题描述开发的是微信公众号的纯静态H5页面，测试发现在iOS上面首次打开会出现字体图标无法显示的问题，并且切换到其它页面，字体图标也是一样无法显示：只能使用微信的右上角内的刷新选项，所有页面的图标就可正常显示，浏览其它页也正常：P.S.所有页面在iOS自带的safari或者chrome浏览器均可正常显示，在android也是正常显示。相关代码HTML:<link rel="styleshee...
H5字体大小不受用户手机设置影响的方法
最新发布
weixin_43988116的博客
08-11 2299
前言：在做H5页面的时候，发现在安卓手机字体出现了排版错乱，且字体变的异常的大，原因是微信设置了字体放大，导致H5页面的字体也变大了。在index.html里添加一个script标签，把以下代码添加进去，即可让页面不受手机设置影响。简单记录如有问题或更优解还请不要吝啬的分享出来，此结。
Android UI总结 Android 和H5 字体大小适配
MatrixMind的博客
01-06 4927
1.Android字体 1. 像素：像素（pixel）为图像的基本单位，是一个抽象的采样。一般作为一个最小的显示单位内置RGB。 2.屏幕尺寸：指屏幕的物理尺寸，一般用屏幕的对角线长度表示 3.宽高比例：屏幕物理尺寸的宽高比，传统手机一般是16:9,4:3，但是全面屏的出现打破了这个局面：三星S8，三星note8，小米mix，LGG6 是 2:1，等都是2:1的手机 4.分辨率：值得是屏...
安卓下设置系统字体大小影响H5页面布局
weixin_30266829的博客
05-04 720
问题描述: 　　调整好的h5页面,放在安卓app内嵌页面后布局正常,后来用户调整系统里面字体大小，后内嵌H5布局乱掉 问题分析： 　　因为用户调整了系统字体的大小,修改了根节点和body节点的font-size,而我的单位和字体大小采用的是rem和em，所以根节点与body节点font-size的改变肯定会影响到我的字体的大小和单位长度的展现 问题确认： 　　初步分析问题后,需...
android基于webview嵌入html5的字体大小设置
jingsi1991的博客
11-30 3839
情景： android手机上继续webview嵌入的html5的页面，当手机系统的字体大小发生变化时，导致页面的字体跟随变化，进而引起页面布局错乱。而在ios上貌似不会更随系统字体的变化而发生变化。 需求： 不论系统字体大小如何变化，页面字体大小、元素布局保持不变。 解决方法： 在webview进行设置：webview.getSettings().setTextZoom(100);
移动端h5不支持font-family里面的微软雅黑等等字体
热门推荐
开心大表哥
12-26 3万+
首先我们来理解一下pc端为什么可以看到网站上设置的微软雅黑字体：微软在2006年12月发布微软雅黑随简体中文版Windows Vista一起发布，是Windows Vista默认字体。意思就是window7以上的微软系统都有默认的微软雅黑字体，都可以看到网站上设置的微软雅黑字体。（电脑上没有装网站上设置对应的字体，就看不到该字体的效果） 对于其他的一些基本字体也差不多是这样的原理。 另外一点
h5手机端适配字体设置
qq_39352780的博客
09-18 5184
前言 手机端页面动态设置根元素，适配不同屏幕大小。 开始 <script> //rem为html的字体大小 通过改变html的字体大小达到适配的效果 remChange(); //监听屏幕改变resize事件 触发remChange方法 window.addEventListener("resize", remChange) function r...
手机改变系统字体大小导致h5页面在webview中变形。。h5页面嵌入webview中，在有些手机上布局乱套的bug。。
杜鲁阳的博客
03-26 3287
解决因为手机设置系统字体大小导致h5页面在webview中变形的BUG   说实话，遇到这个问题，我内心里是崩溃的，表面还一副镇定自若的模样，事实上受到了一万点打击，我做的页面完美适配，就那一台手机，就那一台，整体都是乱的。   然后发现那台手机所有的字体都特别大，像是老年机，这时尝试去查看系统字体大小，发现设置比标准大了两个度【超小–标准–大--超大–巨大，就是五个程度，具体什么字不想看了，要吐...
android h5字体
06-08
在 Android 中，你可以使用以下方法来设置 H5 字体： 1. 在 HTML 文件中使用 CSS 样式来设置字体大小和字体类型，例如： ``` body { font-size: 14px; font-family: Arial, sans-serif; } ``` 2. 在 Android 代码中使用 WebView 的设置方法来设置字体大小和字体类型，例如： ``` WebView webView = findViewById(R.id.webview); WebSettings webSettings = webView.getSettings(); webSettings.setDefaultFontSize(14); webSettings.setStandardFontFamily("Arial"); ``` 其中，setDefaultFontSize() 方法用于设置默认字体大小，setStandardFontFamily() 方法用于设置默认字体类型。 希望这些信息对你有所帮助！
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值