移动端line-height问题
2024-10-09 23:01:05
- 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">
最新文章
- 支付宝接入文档中TRADE_SUCCESS和TRADE_FINISHED的本质区别
- Android 自定义Activity基类与TitleBar
- 为ASP.NET MVC视图输出json
- intellij 提交代码到git
- Tickeys -- 找对打字的感觉 （机械键盘音效软件）
- C# 子窗体点击按钮产生的新子窗体放在父窗体里
- 出色的 JavaScript API 设计秘诀
- 记录一下centos安装httpd+php+mysql的过程
- verilog 常用系统函数及例子
- jQuery -&gt; 获取兄弟元�
- 对discuz的代码分析学习（一）目录结构
- Oracle百问百答（一）
- nefu 72 N!
- FusionCharts生成Flash图表常见问题FAQ
- 记录linux tty的一次软锁排查
- RestTemplate发送请求并携带header信息 RestTemplate post json格式带header信息
- 太白教你学python---博客分类目录
- Windows DHCP备份还原命令
- Task 7 买书最低价格问题
- MysQL使用一与Python交互