安卓移动端line-height垂直居中出现偏移的原因，及解决方法
目前在移动端安卓手机上使用line-height属性，让它的值等于height，结果发现是不居中的。出现了一定位置的偏移情况，如果略微只有两三个像素差距是看不出来的。
左图中的字号是12px，右图中的行高是26px。仔细观察过上图后，闲话少扯，直接说说我对这个android上line-height问题的一些看法：
- 字体大小不要使用奇数字号，带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。
- 尽量不要使用rem或者em的单位，除非你能对字号的把握在每个手机上都能达到第1条的要求。别外，微信小程序上的rpx是动态计算的，可以单独针对这部分使用px。
- 一般只要不是边框贴着文字，一般都还看得过去，在接受的范围之内。如果是边框贴着文字，就是居中了，也不好看啊。
那么，对于小于12像素的居中或者是对居中要求很是严格的需求，这个问题怎么解决？
- 把字号内外边距等设置为需求大小的2倍，使用transform进行缩放。只能针对 单个或者是一排的布局进行缩放，如果是父级自适应高度且可展示多行的，使用transform是有问题的。因为transform缩放是不影响页面布局的。
- 把字号内外边距等设置为需求大小的2倍，使用zoom进行缩放，可以完美解决。zoom原本只有ie支持，但现在除了Firefox，都已经支持了。是的，Firefox不支持。
导致line-height偏移的本质原因 ：
作者：周祺，来源链接：https://www.zhihu.com/question/39516424/answer/274374076
- 1.针对Android 7.0+设备：
- <html>上设置 lang 属性：<html lang="zh-cmn-Hans">，同时font-family不指定英文，如 font-family: sans-serif 。这个方法是利用了浏览器的字体fallback机制，让英文也使用中文字体来展示，blink早期的内核在fallback机制上存在问题，Android 7.0+才能ok，早期的内核下会导致英文fallback到Noto Sans Myanmar，这个字体非常丑。
- 针对MIUI 8.0+设备：
- 设置 font-family: miui 。这个方案就是显式申明中文的方案，MIUI在8.0+上内置了小米兰亭，同时在fonts.xml里给这个字体指定了family name：miui，所以我们可以直接设置。
其它解决方法：
border: 1px solid transparent;
box-sizing:border-box;
设计坞官网https://www.wode007.com/sites/73738.html
2.采用其它垂直居中方法：
安卓移动端line-height垂直居中出现偏移的原因，及解决方法的更多相关文章
- Eclipse、MinGW、JNI编写C++生成dll, Java端调用的完整示例(附java.lang.UnsatisfiedLinkError解决方法)
Eclipse.MinGW.JNI编写C++生成dll, Java端调用的完整示例(附java.lang.UnsatisfiedLinkError解决方法) 问题背景:之前的JNI编程都是基于And ...
- 移动端H5页面中1px边框的几种解决方法
问题提出 这是一个比较老的问题了,我第一次注意到的时候,是UI设计师来找我麻烦,emmm那时候我才初入前端职场,啥也不懂啊啊啊啊啊,情形是这样的:设计师拿着手机过来:这些边框都粗了啊,我的设计稿上是1 ...
- 移动端遇到的常见JS与CSS问题及解决方法
由于笔者的水平有限,虽说都是笔者遇到过使用过的,但文中可能也会出现一些问题或不严谨的地方,望各位指出,不胜感激! 一. css部分 body如果设置height:100%;overflow:hidde ...
- 转：关于安卓多线程while(true)方法占用CPU高的原因及其解决方法
由于项目需要用到安卓多线程操作,结果开了四条线程,下载到平板一直很卡,CPU占用率暴涨.于是开始查找原因,发现是线程run()方法里的while(true)导致的, 下图是为解决时开启一条while( ...
- [RabbitMQ]Windows环境下rabbitmqclt(Command Line Tools)出现Erlang distribution failed错误的解决方法
摘要 当使用rabbitmqctl时出现Erlang distribution failed,把%SystemRoot%Windows\System32\config\systemprofile下的. ...
- 【H5-移动端开发】外部唤起本机APP的解决方法
太长时间没来博客园,原因很简单啊--太懒了!罪过罪过~ 最近公司的APP项目开始运行,采用的是原生框架+内嵌H5页面.作为一个菜鸡前端,开始入手学习移动端的界面制作加载性能优化.由于公司开始推广软件, ...
- 移动端页头推荐配置 出现找不到favicon.ico错误原因和解决方法
favicon 在未指定 favicon 时,大多数浏览器会请求 Web Server 根目录下的 favicon.ico .为了保证 favicon 可访问,避免404,必须遵循以下两种方法之一: ...
- eclipse报错：Multiple annotations found at this line: - String cannot be resolved to a type解决方法实测
Multiple annotations found at this line:- String cannot be resolved to a type- The method getContext ...
- 安卓手机USB无法共享、上网或卡顿的解决方法
安卓手机通过USB为电脑(Windows10)提供网络接入点时,系统程序会异常卡顿. 1)设备管理器2)点击“网络适配器”,在弹出的下拉列表中选择”Remote NDIS based Internet ...
随机推荐
- FTP服务器上传工具，FTP服务器上传工具下载！
IIS7服务器管理工具能够作为FTP的客户端,进行FTP的命令操作,可在客户端,下载,安装FTP软件! 同时,它也可以作为VNC的客户端,进行VNC的命令操作!它能够批量连接Windows和Linux ...
- 别让HR再质问我：我费劲招的人，你用缓存问废了，不能简单点？
概念 缓存穿透 在高并发下,查询一个不存在的值时,缓存不会被命中,导致大量请求直接落到数据库上,如活动系统里面查询一个不存在的活动. 缓存击穿 在高并发下,对一个特定的值进行查询,但是这个时候缓存正好 ...
- Spring WebFlux 学习笔记 - (一) 前传:学习Java 8 Stream Api (2) - Stream的中间操作
Stream API Java8中有两大最为重要的改变:第一个是 Lambda 表达式:另外一个则是 Stream API(java.util.stream.*). Stream 是 Java8 中处 ...
- 关于vue不能像angular深度克隆数据解决办法
vue要让数据源实现响应式前提必须要在初始化的时候有这个属性 如果没有这个属性,也可实现数据实时响应.解决方法: this.数组/对象.spice(0,1,'属性值') Vue.set(要修改的数组或 ...
- TensorFlow开发者证书 中文手册
经过一个月的准备,终于通过了TensorFlow的开发者认证,由于官方的中文文档较少,为了方便大家了解这个考试,同时分享自己的备考经验,让大家少踩坑,我整理并制作了这个中文手册,请大家多多指正,有任何 ...
- 存储系列之 DAS、SAN、NAS三种常见架构概述
随着主机.磁盘.网络等技术的发展,对于承载大量数据存储的服务器来说,服务器内置存储空间,或者说内置磁盘往往不足以满足存储需要.因此,在内置存储之外,服务器需要采用外置存储的方式扩展存储空间,今天在这里 ...
- @codechef - JADUGAR2@ Chef and Same Old Recurrence 2
目录 @description@ @solution@ @accepted code@ @details@ @description@ 定义 dp 序列: \[dp(1) = K\\ dp(n) = ...
- PyQt5入门教程
原文链接:https://blog.csdn.net/azuremouse/article/details/90338961 问题记录: 1. pip 安装时速度太慢, 需要使用国内镜像 pip in ...
- [每日一题2020.06.09] leetcode #97 交错字符串 dp
题目链接 利用动态规划的思想, 对于每种状态(i, j)来说都有(i-1, j) 和 (i,j-1) 需要注意的问题 : 初始化的问题,先把i=0和j=0的状态都初始化后才可以进行dp否则发生数组越界 ...
- （四）进行HTTPS请求并进行(或不进行)证书校验(示例)
原文:https://blog.csdn.net/justry_deng/article/details/81042379 相关方法详情(非完美封装): /** * 根据是否是https请求,获取Ht ...