Question

0 0

移动端设置文字line-height与height后高度不一致的问题


 font-size: 0.12rem;
    line-height: 0.15rem;
    height: 0.30rem;

对一段文字设置如上CSS，在android手机发现实际上文字能显示两行多一点，第三行显示了一点点，请问如何解？

移动端web css

10 years, 1 month ago

遥远D星空

share

遥远D星空 10 years, 1 month ago

Answer 1

0

目测一下，你这个应该是在 UC 浏览器， chrome 浏览器没有这种情况，导致这个 bug 的原因是：UC为了优化移动用户体验将字体大小会放大到16px，我估计你的 html 的 font-size 应该是100px，那么你最终的 font-size 是12px，在UC会变成16px，所以就导致了你的bug了。
解决方法是，在 head 里面增加一个 meta 标签如下：


 html


 <meta name="wap-font-scale" content="no">

answered 10 years, 1 month ago

Sa-kura

share

Sa-kura answered 10 years, 1 month ago

移动端设置文字line-height与height后高度不一致的问题

遥远D星空

Answers

Sa-kura

Your Answer