移动端line-height问题
- ios5
上:82px;下:84px; - ios6
上:82px;下:84px; - ios6 plus
上:124px;下:126px; - mi4w
上:118px;下:130px; - 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问题的更多相关文章
- 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
- 深入了解css的行高Line Height属性
什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...
- [半转]1px边框 移动端
半转的意思是借鉴参考,搬砖,加了一些自己的想法. 在移动端里,因为存在2倍像素的问题,所以很多时候,移动端上的1px边框并不是意义上的.从下图红色框看到dpr:2.0 ,表示1px等于2倍的物理像素. ...
- jenkins+gitlab自动化编译部署方案探索及服务端编译webpack实战
一. 背景 之前我们的开发流程为在本地进行webpack打包编译,然后svn提交源代码和编译后的代码.同时每次提交前也会从svn更新源代码和编译后的代码.这样做有几个缺点: 1. svn 更新和提交编 ...
- 原生 JS 实现移动端 Touch 滑动反弹
什么是 Touch滑动?就是类似于 PC端的滚动事件,但是在移动端是没有滚动事件的,所以就要用到 Touch事件结合 js去实现,效果如下: 1. 准备工作 什么是移动端的 Touch事件?在移动端 ...
- 真正的能理解CSS中的line-height,height与line-height
https://blog.csdn.net/a2013126370/article/details/82786681 在最近的项目中,常常用到line-height,只是简单的理解为行高但并没有深层次 ...
- height与line-height
1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...
- (document).height()、$(document).scrollTop()
(document).height().$(document).scrollTop(),有需要的朋友可以参考下. jQuery(window).height()代表了当前可见区域的大小,而jQuery ...
- 移动端使用rem.js,解决rem.js 行内元素占位问题
父级元素: letter-spacing: -0.5em;font-size: 0; 子级元素: letter-spacing: normal; display: inline-block; vert ...
- 超全面的.NET GDI+图形图像编程教程
本篇主题内容是.NET GDI+图形图像编程系列的教程,不要被这个滚动条吓到,为了查找方便,我没有分开写,上面加了目录了,而且很多都是源码和图片~ (*^_^*) 本人也为了学习深刻,另一方面也是为了 ...
随机推荐
- Linux Free命令每个数字的含义 和 cache 、buffer的区别
Linux Free命令每个数字的含义 和 cache .buffer的区别 我们按照图中来一细细研读(数字编号和图对应)1,total:物理内存实际总量2,used:这块千万注意,这里可不是实际已经 ...
- Laravel 5.2服务----用户验证Auth相关问题
关于laravel的auth()用户认证这一块,面前我也是,有用到,有碰到什么问题我就记录下来. 手动认证用户 <?php namespace App\Http\Controllers; use ...
- 【原创】大数据基础之Hive(4)hive元数据库核心表结构
1 dbs +-------+-----------------------+----------------------------------------------+------------+- ...
- JVM·垃圾收集器与内存分配策略之垃圾收集器!
1.Serial(串行)收集器(新生代都采用复制算法) 这是个单线程的收集器:即 当他工作的时候,会停掉虚拟机所有的线程!(Stop The World)
- struts2 过滤器和拦截器的区别和使用
java web 过滤器和拦截器的区别和使用 1.1 什么是拦截器: 拦截器,在AOP(Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然 ...
- Hibrenate之事务的理解以及代码编写
3 事务概念 事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位.通过事务,SQL Server能将逻辑相关的一组操作绑定 ...
- 【mongoDB高级篇①】聚集运算之group与aggregate
group 语法 db.collection.group({ key:{field:1},//按什么字段进行分组 initial:{count:0},//进行分组前变量初始化,该处声明的变量可以在 ...
- SpringBoot图片上传(二)
需求简介:做新增的时候,需要上传图片.(⊙o⊙)…这需求描述也太简单了吧,限制文件大小60*60 512kb ,第一次做,记录一下嗷,废话就不啰嗦了 上代码 代码: //html代码<div c ...
- 《剑指offer》 二进制中1的个数
本题来自<剑指offer> 二进制中1的个数 题目: 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 思路: 两种思路: 第一种:对n进行左移,检测最后一位是否为1,但考 ...
- Git使用五:回到过去
reset:将仓库里面的内容恢复回暂存区,类似于从仓库里检出文件到暂存区checkout:将暂存区的文件恢复回工作区,即,把暂存区的文件检出到工作区 下面是之前三次提交的内容 三个区域的文件状态: 执 ...