码迷,mamicode.com
首页 > 移动开发 > 详细

移动端line-height问题

时间:2018-06-15 13:12:52      阅读:215      评论:0      收藏:0      [点我收藏+]

标签:tar   技术   需要   手机浏览器   b2c   content   load   upload   ext   

  1. ios5 
    技术分享图片 
    上:82px;下:84px;
  2. ios6 
    技术分享图片 
    上:82px;下:84px;
  3. ios6 plus 
    技术分享图片
    上:124px;下:126px;
  4. mi4w 
    技术分享图片
    上:118px;下:130px;
  5. vivo 
    技术分享图片 
    上:58px;下:64px;

经过实际操作发现,iOS系统上上下相差两个像素(也有可能是我测距离的误差) 
但是Android上相差比较大,而且不同的机型相差数目不一样

产生原因

问了下技术大神,说是line-height对一部分Android手机不起作用,有自己默认的行高,默认行高为22px(这点我没有试验,不知道是否准确)

解决方法

line-height:normal; 
padding:10px 0;
 
目前只发现这个方法,没有发现其他的方法,有新的方法将更新,欢迎大家指正。

 

或者:

关于line-height大家应该非常熟悉了吧,就是用来做垂直居中的,屡试不爽,基本上没有什么问题,但是最近一个项目,测试提了一个bug,看图吧。

技术分享图片

从别处窃的图,这个问题只有安卓上才能复现,做了demo,发现应该是font-size的问题,你们可以自己试试,font-size为13px或者奇数时,line-height会有一定的偏差,在safari上没有问题,至于原因,现在还没找到,等找到了再来补充吧。

解决办法

虽然原因没有找到,但是可以大致猜出是安卓上奇数字号导致line-height均分上下边距的时候出现了偏差,那么,我们就可以通过这方面入手。

既然line-height均分不了,那就抛弃line-height吧,看代码

 

很简单吧,将line-height设为0,用padding来进行填充,完美实现,自测没什么问题,如果造成其他问题,欢迎留言指出

 

UC手机浏览器在识别到页面文字很多的情况下会自动放大字体优化阅读体验,如果要关闭这个功能需要在网页头部添加:
<meta name="wap-font-scale" content="no">

移动端line-height问题

标签:tar   技术   需要   手机浏览器   b2c   content   load   upload   ext   

原文地址:https://www.cnblogs.com/love314159/p/9186348.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!