解决移动端字体大小与设定大小不同的问题

最新推荐文章于 2021-11-03 16:04:44 发布
VIP文章 最新推荐文章于 2021-11-03 16:04:44 发布
阅读量1w 收藏 5
点赞数
分类专栏： 前端碎碎念
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/grahamacer/article/details/74946060
版权

前段时间回头去写纯静态Html页面，涉及到手机端匹配的时候，遇到了特别棘手的问题

如图，设置font-size是14px，可是Chrome实际渲染是42px。但是同页面另外同样的标签却没有任何问题




所有的CSS样式都删除依然无法生效，在想是不是动态设置了viewport的问题？

问题依然无法解决，直至偶然看到一篇文章：Font Boosting 才算是彻底解决了这个问题

简单来说这也是webkit挖的一个坑，这个特性被称为「Text Autosizer」，最初的目的是希望手机端访问网页，因为宽度过大而看不清字体提出的一种解决方案。这个方案就是将字体适度的增大，保证既可以不缩放页面，也能看清文字信息

特性

最低0.47元/天 解锁文章
GrahamACER
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动端网页大小自适应的实现方法
09-28
下面小编就为大家带来一篇移动端网页大小自适应的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css兼容性问题的整理
weixin_30514745的博客
03-11 177
1.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px。解决方案：给文字设定line-height。确保所有文字都有默认的line-height值。 2.ff下容器高度限定.即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie...
css 前端 由于尺寸太小导致的 宽高设置无效 或字体大小设置无效 解决方法记录
Joey的博客
09-17 781
项目背景：用CSS画了一个单选框 但是在不同手机显示的却不圆 部分代码 .Ma_sign_sex{ width: 28px; height: 28px; margin-left: 16px; border: 2px solid #bfbfbf; border-radius: 50%; position: relative; display: flex;
HTML+CSS项目实践八：同一个HTML页面，在不同电脑上的显示效果不一样！解决HTML页面针对不同分辨率的问题
caimaomaocai的博客
07-17 1万+
版权声明：王迪 https://blog.csdn.net/dnruanjian/article/details/85336448 表象问题：同一个HTML页面，在不同电脑上的显示效果不一样。（样式错位等） 举例说明：当电脑分辨率不同时，第二张图片的样式无法完全展示。 问题分析：由于电脑屏幕分辨率不同，像素密度不同，视觉上会有差异，甚至差异很大。 参考资料：百度...
解决css设置字体，网页字体超过16px显示高低不一情况
Cherries_h的博客
04-24 2424
设计者通常不想网页字体，以浏览器默认字体显示，通常会在样式文件中对body设置全局的字体样式，只对于font-family设置常规字体，会出现汉字高低不一的情况，这种可能是种英文字体，汉化有问题。原代码：body{ font-family: 'Microsoft Yahei','微软雅黑';}现代码：body{font: 12px/1.5 tahoma,arial,'Hiragino Sans G...
CSS 文本高度的问题
WangYan的博客
11-03 669
开发中，一个文本写了10px，但是它的实际高度居然是16px。后来发现，原来文本的行高有个默认值，所以文本的高度为：lineHeight*fontSize=realHeight。 因此，如果需要文本高度跟字号大小保持一致，name设置下line-height即可！ ...
同一个css样式，手机上显示的字体不一样大小
sunline22的博客
04-24 1508
在最外层元素加入样式 display: list-item; list-style-type: none;
移动端字体显示大小和css设置大小的不一致解决方案
热门推荐
04-29 1万+
出现问题 这几天在做移动端页面，研究了一下手淘的 flexible.js 并在自己项目中试行了一下，然后发现了一个纠结无比的问题，即：css里设置了字体大小，但是显示却非常诡异，用 “诡异” 来形容是因为这个问题在定位的时候真的无迹可寻。 探查原因 后来接触到了一个概念，终于了解了问题的本来面目。这个概念叫做 “Font Boosting”（文字爆炸）。 当 viewport 的 initial...
移动端自适应布局与字体大小
low666的博客
04-10 3101
移动端自适应布局与字体大小 vw, vh实现 vw：根据可视区的宽度来计算的，100vw相当于宽度为100%，10vw则相当于10%。 vh：根据可视区的高度来计算的，和vw换算方式一样。 font-size:10vw。如果浏览器可视区宽度为320px的话，那么字体大小为32px，以此类推。 <!DOCTYPE html> <html> <head> ...
手机端自适应字体大小和元素宽度自适应
农码精神
05-11 1451
手机端自适应字体大小和元素宽度自适应 以前在做手机端页面时候通过媒体查询的方法定义字体或者宽高。 这样看设计稿切图时一切字体大小、内容宽度全靠感觉去定义，media定义好之后，拿起键盘就是干。 字体、宽高都用rem来定义，此方法略爽！ @media (min-width:0px){ html{font-size:12px;} ...
pc端页面到移动端显示时，相同字体大小移动端显示不一致的问题
Sissi的个人笔记
11-05 2857
https://github.com/amfe/article/issues/10 原来这个特性被称做**「Text Autosizer」，又称「Font Boosting」、「Font Inflation」**，是 Webkit 给移动端浏览器提供的一个特性：当我们在手机上浏览网页时，很可能因为原始页面宽度较大，在手机屏幕上缩小后就看不清其中的文字了。而 Font Boosting 特性在这时会...
详解移动端HTML5音频与视频问题及解决方案
09-27
主要介绍了详解移动端HTML5音频与视频问题及解决方案的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue项目中使用lib-flexible解决移动端适配的问题解决
10-18
主要介绍了vue项目中使用lib-flexible解决移动端适配的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
字体文件过大，导致移动端加载缓慢
07-04
移动端开发 -字体文件过大-导致应用运行缓慢甚至闪退的解决方案！下载此软件提取出你自己想要的文字进行重新生成font.ttf文件即可
解决移动端 ios 系统键盘遮挡的问题
08-28
下面小编就为大家分享一篇解决移动端 ios 系统键盘遮挡的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
微信小程序addCard遇到的小坑
GrahamACER的博客
04-09 4980
坑1，首先是一定要用微信开发者工具调试你的页面，虽然它就是一个Chrome内核包裹的玩意，但如果不用它的工具直接用Chrome你是收不到任何API返回的提示的wx.config({     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。     appId: ''...
div里ul li浮动之后父容器高度不能自动增加的解决方法
GrahamACER的博客
09-14 4018
之前在Github上fork了一个题目，按照流程图来制作一个电商网站…但是遇到点问题 如果一个Div内的Ul，li元素浮动的话，这个DIV的高度是没办法被正常的撑起来（显示高度为0） 下图一共4个div，我给每个div设置了1px灰色的border-bottom。但是一预览发现border叠在了一起，说明div高度为0 这个问题出现的原因是因为在一个区块内的元素被应用了float
CSS3 transition属性和Hover效果
GrahamACER的博客
09-14 3226
w3cschool上其实有很详细的基本属性内容： transition:【属性】【变换延续的时间 】【速率】 属性怎么理解…假如有一个div宽度是200px .
vue移动端字体大小适配
最新发布
07-28
在Vue移动端开发中，字体大小的适配通常使用rem单位来实现，下面是一种常用的适配方案： 1. 在main.js或者你的入口文件中，添加以下代码： ```javascript // 计算rem基准值 function setRemUnit() { const rem = document.documentElement.clientWidth / 10; document.documentElement.style.fontSize = rem + 'px'; } // 初始化rem基准值 setRemUnit(); // 监听窗口大小改变事件，重新计算rem基准值 window.addEventListener('resize', setRemUnit); ``` 2. 在样式文件中，使用rem单位来定义字体大小，例如： ```css body { font-size: 0.16rem; /* 16px */ } h1 { font-size: 0.2rem; /* 20px */ } ``` 这样做的原理是将屏幕宽度分成10份，1份为1rem，然后通过设置根元素（html）的字体大小为1rem，再根据比例来设置其他元素的字体大小。当屏幕大小改变时，通过监听resize事件重新计算rem基准值，从而实现字体大小的适配。 这种方案可以根据屏幕大小自动调整字体大小，适用于不同屏幕尺寸的移动设备。希望对你有帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值