解决微信设置字体大小对 rem 适配方式的影响

最新推荐文章于 2023-05-04 15:08:53 发布
最新推荐文章于 2023-05-04 15:08:53 发布
阅读量470 收藏
点赞数
分类专栏： 技术文章 文章标签： 微信 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sumaolin/article/details/126858465
版权

  1. 关于微信安卓端网页字体适配的通知 | 微信开放社区 (qq.com)

    react应用中的index.html head头部引用并不起作用，通过设置 监听 WeixinJSBridgeReady事件，可以发现Android种，微信设置的字体大小 对rootFontSize 的影响是不一样的，标准2 字体大小是20 ，4-8是22；10是28 ；12对应31，最大的14对应33；而iPhone X max 返回固定值20，所以测试下来这个方法不可用

  2. 微信设置文字大小影响网页布局_大大大大冬瓜的博客-CSDN博客

    同样的react应用的index.html中的head中添加了相应的代码，不管进入页面前 微信设置的字体大小是多少，都可以恢复到标准模式下，进入页面后再次通过微信菜单 中设置字体大小也不会引起页面字体变大

    推荐这个方法

KevinSu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
由于微信字体大小的设置导致rem布局的微信公众号页面发生错乱的问题总结
qq_45915537的博客
07-16 2705
微信应用中由于字体设置的问题导致的页面错乱适配 上一篇文章中总结了在手机端怎么通过rem 动态设置html 的fontSize 值，解决手机端的适配问题，但是在微信中有一个特例。 一般情况下，在rem布局中 rem的相对大小只受到html 标签的fontSize 影响，但是在微信中 设置字体的大小也会影响到 rem 的比例，所以在微信应用页面中通过rem 适配的页面就会发生一些不可预料的错乱。 为了解决上述问题就需要在动态调取setFont函数时获取到微信调整字体的比例的倒数 scale，然后给rem 的比
手机/微信/浏览器的字体设置太大，rem 计算不准确
Jioho的博客
01-14 2969
手机/微信/浏览器的字体设置太大，rem 计算不准确的问题 鉴于用微信的人特别的多，而且微信出了特别贴心的功能就是调整界面字体大小。 可是这一调 H5 就出问题咯。。。页面变得特别大，记录一下这个爬坑过程（H5 用的是 REM 单位） 单刀直入，直接贴出正常的font-size的值。我这边正常应该是 46.9 在微信上把字体调大后。通过 spy-debugger 来进行调试。发现如果微信的字...
微信浏览器字体调整 PHP,如何针对微信浏览器的调整字体大小功能进行适配？...
weixin_30725829的博客
03-21 151
微信jssdk，有个初始化字体的方法(function() { if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") { handleFontSize(); } else { if (document.addEventListener) { document.addE...
微信小程序中rpx与rem单位使用
蚁族的奋斗的博客
06-27 569
http://blog.csdn.net/aaasai_/article/details/53409262
微信H5 用户调整微信字体 导致使用rem的页面错乱
夜雨风亭
11-18 2856
微信H5上，如果发现部分用户或手机上页面离奇错乱，并且你使用了rem布局，那么八成就是这个原因了 因为用户调整了微信字体，导致使用rem的页面错乱 设置 => 通用 => 字体大小（如下图） 不让用户修改肯定是不可能了，那就只能让修改了的设置对我们不生效 //ios body{ -webkit-text-size-adjust: 100% !important; } //安卓 (function() { if (typeof WeixinJSBridge == "object" &
android+微信字体大小,关于微信安卓端网页字体适配的通知
weixin_28728279的博客
05-25 465
为了提供给用户更好的阅读体验，微信安卓版 7.0.10 版本起，网页的字体会跟随微信设置里的字体大小更改而变化。若调整字体变大或变小后，部分未适配网页的排版会出现显示错乱，建议未进行适配的开发者尽快完成对“ 字体大小”的适配。查看网页在字体不同大小下展示效果的方法：方法1："设置">"通用">“字体大小">进行字体大小修改后查看对应网页显示效果。方法2：在微信内访问对应网页右上...
详解CSS3 rem(设置字体大小) 教程
09-24
总的来说，`rem`单位在CSS3中提供了一种更为灵活和可控的字体大小设置方式，尤其适用于响应式设计和动态调整字体大小的场景。通过合理地运用`rem`，开发者可以创建出更加用户友好的Web界面，同时保持代码的简洁性...
浅谈pc端rem字体设置的问题
08-29
在PC端开发中，REM字体设置可以应用于各种场景，例如在内容框中显示的内容，我们可以使用REM单位来设置字体大小，以确保内容在不同大小的屏幕上显示效果保持一致。 4、REM字体设置在移动端的应用 在移动端开发中，...
轻松掌握CSS3中的字体大小单位rem的使用方法
09-24
rem是css3新定义的设置字体大小属性,rem大小都是以html的字体大小设置为参考值进行一个字体大小缩放,下面就带大家来轻松掌握CSS3中的字体大小单位rem的使用方法:
自动设置html节点的字体大小
最新发布
01-12
使用方式，在项目中直接用rem单位就行 直接在main.js里引入 import "@/utils/setHtmlFontSize";
移动端 通过js动态设置字体大小
zz0567的博客
11-29 430
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>r.
[极致用户体验] 让你的网页，适配微信大字号模式！体验超好，快来收藏
Hull Qin
09-27 5001
本文给你全网最完美的适配微信大字号的解决方案！ 超过90%的网页，不支持微信大字号模式！在微信浏览器的大字号模式/关怀模式下，网页排版会错乱。该如何解决呢？
微信浏览器 rem 不适配的解决方案
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
07-26 4263
在升级系统或升级微信之后，微信内置浏览器产生的 rem 不能正确填充满的问题。该问题着实让人难受，小编在看到测试提的这个BUG之后也是瞬间整个人都不好了。经过尝试得知了该问题产生的原因是因为微信在设置字体大小后，会对浏览器中 rem的值产生影响。
微信web页面rem屏幕适配，多数手机能正常显示，三星s6显示为放大效果，应该怎么调整？
qq_25194685的博客
07-06 420
<script> function _adaptFont(maxWidth, baseWidth, baseSize) { maxWidth = 750; //最大值750px baseWidth = 320; baseSize = 16; var winWidth = parseInt(window.innerWidth); /*s4手机读到的winWidth是分辨率的宽*/ var docWidth = parseInt(document.docum.
移动端处理rem根字体的方法
weixin_41888295的博客
05-04 784
如果页面上所有元素的字体大小都设置为相同的rem根字体，可能会导致某些元素的字体大小与其他元素不匹配，从而影响页面的视觉效果。因此，在移动端设备上，需要根据不同设备的屏幕大小来设置字体大小，以确保页面在所有设备上都能够正确地显示。为了在移动端设备上处理rem根字体，可以将页面中的所有元素的字体大小都设置为固定的字体大小。尤其对于使用手机等移动设备的用户而言，过长时间的使用会对眼睛造成很大的伤害。然而，在移动端设备上，字体大小通常是通过rem根字体来设置的，这就需要特别注意在移动端设备上处理rem根字体。
解决rem页面在微信浏览器中样式错乱问题
weixin_42178670的博客
08-16 743
IOS处理方法 感谢这位知乎大佬文章：https://zhuanlan.zhihu.com/p/443319104
《微信小程序七日谈》- 第二天：你可能要抛弃原来的响应式开发思维
weixin_33747129的博客
11-26 275
《微信小程序七日谈》系列文章： 第一天：人生若只如初见； 第二天：你可能要抛弃原来的响应式开发思维； 第三天：玩转Page组件的生命周期； 第四天：页面路径最多五层？导航可以这么玩； 第五天：你可能要在登录功能上花费大力气； 第六天：小程序devtool隐藏的秘密; 第七天：不要捡了芝麻丢了西瓜 本系列的文章并非初学教程，而是笔者在具体开发过程中遇到的问题以及部分解决方案。 上篇文章第一天...
移动端微信、QQ浏览器 web 用 rem 单位适配不生效问题
Dragon1993vsLong的博客
11-21 2042
移动端微信、QQ浏览器 web 用 rem 单位适配不生效问题
微信h5禁止微信内置浏览器调整字体大小
日常分享
10-09 571
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..
在微信小程序中如何设置html字体大小，使全局的rem大小改变？
04-24
/*设置全局的rem大小*/ @import "utils.wxss"; /*设置页面font-size*/ .page { font-size: 30rpx; /* 相对于Viewport宽度 */ } ``` 然后在 utils.wxss 文件中设置字体大小的缩放比例： ``` /*设置字体大小的缩放...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值