h5 移动端字体行高偏上问题

女爷i 2021-12-22 00:11 422阅读 0赞

才发现 移动端项目怎么会有那么多问题呢？

现在不用搞ie的hack兼容问题了

又来了h5的兼容

![870489-20190605104405308-1768105290.gif][]

哎，问题还是得解决啊

言归正传

**问题：移动端h5页面，文本行高偏上的问题，（据说ios手机没有），咱也没ios手机，咱也不敢问啊，有的大佬试试**

**当我们使用rem，em，作适配时，字体可能出现奇数，带小数点的，字体大小，当字体大小小于12px时，安卓手机为避免奇数字体带来的偏差会自动设置成偶数**

![870489-20190605105037696-1832699912.jpg][]

网上有很多说法，

比如，

用flex布局设计 设置 align-items: center 的

设置行高为

line-height: normal;
    vertical-align: middle;
    使用padding撑开的

反正我是没生效，不知道大佬们生效了没有

![870489-20190605110300187-1547422181.jpg][]

经过测试，可行的方法，我的是小米手机（我发誓我是爱国的，下一部就买华为）

**方法一：**

**改变字体大小，使其大于等于12px**

**将模块整体放大一倍，再使用 transform: scale(0.5); transform-origin: 0% 0%; 缩小为正常**

**方法二：**

**使用自适应表格布局 - - table布局**

**注意将外层容器设置脱离文档流 ，使用绝对定位，flex，浮动啊，都可以，看你喜欢**

**display: table-cell;**

**vertical-align: middle;**

**text-align: center;**

收获测试崇拜值一枚

![870489-20190605110624874-1982983882.jpg][]

转载于:https://www.cnblogs.com/CaktyRiven/p/10978411.html

[870489-20190605104405308-1768105290.gif]: /images/20211220/68be00cf6e674d3dbe5c4de6868403aa.png
[870489-20190605105037696-1832699912.jpg]: /images/20211220/56cb9dd1d84e491280edc672fe91a4da.png
[870489-20190605110300187-1547422181.jpg]: /images/20211220/af13c539ffb444aca79d931fbf75e62a.png
[870489-20190605110624874-1982983882.jpg]: /images/20211220/25a7540965784478b25f38f97dffef8c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，422人围观）

还没有评论，来说两句吧...

相关阅读

相关 H5移动端字体自适应（也适用于宽高）

阅读原文扫码查看： ![在这里插入图片描述][20200810095659200.bmp] 自己研究摸索了几种H5移动端字体自适应的方法，分享出来和大家一起共享。

青旅半醒/ 2022年11月26日 01:45/ 0 赞/ 701 阅读

相关 h5移动端知识小结

meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 <meta name="viewport" content="width=device-w

矫情吗；*/ 2022年07月15日 12:08/ 0 赞/ 269 阅读

相关移动端h5页面点透问题

用的是zepto.js 一个页面分三个tab，通过隐藏，显示div来展示不同的数据。 A tab页面：已开通基金列表数据，当没有数据时，会显示一个跳转到B tab页面的

待我称王封你为后i/ 2022年06月09日 09:46/ 0 赞/ 261 阅读

相关 h5移动端兼容问题

H5项目常见问题及注意事项 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 <meta name="viewport" conten

浅浅的花香味﹌/ 2022年06月01日 03:27/ 0 赞/ 406 阅读

相关移动端字体偏上问题

在移动端用rem来做单位，然后做到一个小框框里放文字的div ，发现字体严重的偏上，原因是：rem单位换算的时候在有的手机会四舍五入掉，每个手机支持不一样，框框的长高用

小鱼儿/ 2022年05月29日 01:05/ 0 赞/ 152 阅读

相关 H5项目移动端调试器

开发的移动端H5项目在手机浏览器调试工具 [https://github.com/liriliri/eruda/blob/master/doc/README\_CN.md][

不念不忘少年蓝@/ 2022年03月22日 08:48/ 0 赞/ 301 阅读

相关 H5和移动端交互

> // 移动端的浏览器内核 > var browser={ > versions:function(){ >

分手后的思念是犯贱/ 2022年03月01日 09:08/ 0 赞/ 311 阅读

相关 h5移动端注意事项

一、meta的使用 1、<meta name="viewport" content="width=device-width,initial-scale=1.0, min...

心已赠人/ 2022年02月19日 11:47/ 0 赞/ 485 阅读

相关移动端H5实现图片上传

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmN

雨点打透心脏的1/2处/ 2022年01月25日 22:27/ 0 赞/ 1586 阅读

相关 h5 移动端字体行高偏上问题

才发现移动端项目怎么会有那么多问题呢？现在不用搞ie的hack兼容问题了又来了h5的兼容 ![870489-20190605104405308-1768105290

女爷i/ 2021年12月22日 00:11/ 0 赞/ 423 阅读