zoukankan      html  css  js  c++  java
  • 安卓移动端line-height垂直居中出现偏移的原因,及解决方法

    目前在移动端安卓手机上使用line-height属性,让它的值等于height,结果发现是不居中的。出现了一定位置的偏移情况,如果略微只有两三个像素差距是看不出来的。

    左图中的字号是12px,右图中的行高是26px。仔细观察过上图后,闲话少扯,直接说说我对这个android上line-height问题的一些看法:

    1. 字体大小不要使用奇数字号,带小数点的更不要提了。也就是说被2整除的整数且不可小于12px。
    1. 尽量不要使用rem或者em的单位,除非你能对字号的把握在每个手机上都能达到第1条的要求。别外,微信小程序上的rpx是动态计算的,可以单独针对这部分使用px。
    1. 一般只要不是边框贴着文字,一般都还看得过去,在接受的范围之内。如果是边框贴着文字,就是居中了,也不好看啊。

    那么,对于小于12像素的居中或者是对居中要求很是严格的需求,这个问题怎么解决?  

    1. 把字号内外边距等设置为需求大小的2倍,使用transform进行缩放。只能针对 单个或者是一排的布局进行缩放,如果是父级自适应高度且可展示多行的,使用transform是有问题的。因为transform缩放是不影响页面布局的。
    2. 把字号内外边距等设置为需求大小的2倍,使用zoom进行缩放,可以完美解决。zoom原本只有ie支持,但现在除了Firefox,都已经支持了。是的,Firefox不支持。

    导致line-height偏移的本质原因 : 

    作者:周祺,来源链接:https://www.zhihu.com/question/39516424/answer/274374076  
    是Android在排版计算的时候参考了primyfont字体的相关属性(即HHead Ascent、HHead Descent等),而primyfont的查找是看`font-family`里哪个字体在fonts.xml里第一个匹配上,而原生Android下中文字体是没有family name的,导致匹配上的始终不是中文字体,所以解决这个问题就要在`font-family`里显式申明中文,或者通过什么方法保证所有字符都fallback到中文字体。
    • 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,所以我们可以直接设置。


    其它解决方法:

    1.添加border相关属性:
    1 border: 1px solid transparent;
    2 box-sizing:border-box;

    设计坞官网https://www.wode007.com/sites/73738.html

    2.采用其它垂直居中方法:

  • 相关阅读:
    [转载] 十问 TiDB :关于架构设计的一些思考 TiDB
    blender low poly + unity 3d游戏制作
    d2js + activiti 备忘
    使用ActionFilterAttribute进行重定向注意事项
    一键发布部署vs插件[AntDeploy],让net开发者更幸福
    Docker常用命令
    C# 自然周,月,季度计算。
    .Net Core Web Api使用模型验证验证参数合法性
    WebApi 路由机制剖析
    WebApi路由机制详解
  • 原文地址:https://www.cnblogs.com/ypppt/p/13061151.html
Copyright © 2011-2022 走看看