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问题的更多相关文章

  1. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  2. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  3. [半转]1px边框 移动端

    半转的意思是借鉴参考,搬砖,加了一些自己的想法. 在移动端里,因为存在2倍像素的问题,所以很多时候,移动端上的1px边框并不是意义上的.从下图红色框看到dpr:2.0 ,表示1px等于2倍的物理像素. ...

  4. jenkins+gitlab自动化编译部署方案探索及服务端编译webpack实战

    一. 背景 之前我们的开发流程为在本地进行webpack打包编译,然后svn提交源代码和编译后的代码.同时每次提交前也会从svn更新源代码和编译后的代码.这样做有几个缺点: 1. svn 更新和提交编 ...

  5. 原生 JS 实现移动端 Touch 滑动反弹

    什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作 什么是移动端的 Touch事件?在移动端 ...

  6. 真正的能理解CSS中的line-height,height与line-height

    https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...

  7. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

  8. (document).height()、$(document).scrollTop()

    (document).height().$(document).scrollTop(),有需要的朋友可以参考下. jQuery(window).height()代表了当前可见区域的大小,而jQuery ...

  9. 移动端使用rem.js,解决rem.js 行内元素占位问题

    父级元素: letter-spacing: -0.5em;font-size: 0; 子级元素: letter-spacing: normal; display: inline-block; vert ...

  10. 超全面的.NET GDI+图形图像编程教程

    本篇主题内容是.NET GDI+图形图像编程系列的教程,不要被这个滚动条吓到,为了查找方便,我没有分开写,上面加了目录了,而且很多都是源码和图片~ (*^_^*) 本人也为了学习深刻,另一方面也是为了 ...

随机推荐

  1. CANopen--实现双电机速度同步

    图1 将上图图中左边的电机和右边的电机进行速度同步,右边的电机同步左边的电机速度.这里需要知道Copley的驱动中的速度环的输入输出情况.如下图所示,速度环限制器接收速度命令信号,经限制后,产生一限制 ...

  2. eclipse:显示堆内存

    如下图 :

  3. iPhone内存溢出——黑白苹果

    一旦iPhone内存长期占用过大,一关机即再难启动,如果你Home键加power键等都不行,那么可以要刷机了. 方式: 1.电脑下载ITunes,这个过程比较漫长,一系列逐渐大概3G,下载完成打开. ...

  4. jdbctemplate 调用oracle 有返回(会话型临时表数据的)结果的存储过程

    注:本文为博主 原创. jdbctemplate 调用oracle存储过程 事务 临时表  有返回结果 1:java 代码 本逻辑代码本是想把 java 代码里的list<Strign>类 ...

  5. Confluence 6 数据库结构图

    结构图细节 下面的 SVG 图片(可缩放矢量图)包括了 Confluence 数据库中使用的所有表.单击下面的连接在你的浏览器中打开图片连接,你也可以随后将图片下载到本地.你可以使用浏览器的缩放快捷键 ...

  6. Confluence 6 附件存储配置

    在默认的情况下 Confluence 的附件存储在 home 目录中(例如,在文件系统). 希望对 Confluence 的附件存储进行配置: 在屏幕的右上角单击 控制台按钮 ,然后选择 Genera ...

  7. Confluence 6 编辑和删除用户宏

    编辑一个用户宏 希望对一个用户宏进行编辑: 进入  > 基本配置(General Configuration) > 用户宏(User Macros) 在相关的宏的边上,单击 编辑(Edit ...

  8. MySQL、MongoDB、Redis 数据库之间的区别

    NoSQL 的全称是 Not Only SQL,也可以理解非关系型的数据库,是一种新型的革命式的数据库设计方式,不过它不是为了取代传统的关系型数据库而被设计的,它们分别代表了不同的数据库设计思路. M ...

  9. Cpython支持的进程与线程

    一.multiprocessing模块介绍 python中的多线程无法利用CPU资源,在python中大部分情况使用多进程.python中提供了非常好的多进程包multiprocessing. mul ...

  10. python并发编程之多进程2-------------数据共享及进程池和回调函数

    一.数据共享 1.进程间的通信应该尽量避免共享数据的方式 2.进程间的数据是独立的,可以借助队列或管道实现通信,二者都是基于消息传递的. 虽然进程间数据独立,但可以用过Manager实现数据共享,事实 ...