安卓移动端line-height垂直居中出现偏移的解决方法
目前移动端在项目使用的rem,安卓手机上line-height属性,让它的值等于height,结果发现是不居中的。
出现此问题的原因是Android在排版计算的时候参考了primyfont字体的相关属性(即HHead Ascent、HHead Descent等),而primyfont的查找是看`font-family`里哪个字体在fonts.xml里第一个匹配上,而原生Android下中文字体是没有family name的,导致匹配上的始终不是中文字体,所以解决这个问题就要在`font-family`里显式申明中文,或者通过什么方法保证所有字符都fallback到中文字体。
解决方法:
1、添加border相关属性:
- border: 1px solid transparent;
2、针对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,这个字体非常丑。
3、针对MIUI 8.0+设备:
- 设置 font-family: miui 。这个方案就是显式申明中文的方案,MIUI在8.0+上内置了小米兰亭,同时在fonts.xml里给这个字体指定了family name:miui,所以我们可以直接设置。
安卓移动端line-height垂直居中出现偏移的解决方法的更多相关文章
- 移动端H5开发遇到的问题及解决方法
本篇文章给大家带来的内容是关于移动端H5开发遇到的问题及解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 微信分享签名错误invalid signature vue单页应用hi ...
- ffmpeg按比例缩放--"width / height not divisible by 2" 解决方法
最近在处理视频的时候,有这么一个需求 如果视频的分辨率宽度大于960的话,就把宽度设为960,而高度按其比例进行缩放 如果视频的分辨率高度大于540的话,就把高度设为540,而宽度按其比例进行缩放 之 ...
- 记录vue用 html5+做移动APP 用barcode做扫一扫功能时安卓 的bug(黑屏、错位等等)和解决方法
最近做项目时,要用到扫一扫二维码的功能,在html5+里面有提供barcode功能,于是照过来用了, 写的代码如下 : 扫码页面: <style lang="less" sc ...
- table和div设置height:100%无效的完美解决方法
刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...
- Jenkins打包安卓时提示没同意constraintLayout的license的解决方法
使用Jenkins打包安卓项目时,报错并失败,错误信息: You have not accepted the license agreements of the following SDK compo ...
- Flutter打包release版本安卓apk包真机安装无法请求网络的解决方法
今天flutter build apk打包了一个release.apk包,在真机上安装后网络数据都不显示,但是在模拟器上没问题,然后又连接真机开debug各种测试,一切都正常!那这会是什么问题呢? 查 ...
- 移动端页面输入法挡住input输入框的解决方法
1,宽高用了百分比或者vw/vh布局的,input输入框的最外层父容器的可用JS动态设置为当前窗口的宽高(防止输入法的弹出令页面变形) 2,最外层父容器用了fixed定位的,不要用top:0;要用bo ...
- 小程序安卓端播放不了音频解决方法wx.createInnerAudioContext()
在小程序播放音频时,使用组件wx.createInnerAudioContext(),安卓端无法播放音频. 我的情况:播放服务器上传来的音频,格式为mp3.首先查看你的格式是否符合文档要求 在安卓端进 ...
- 安卓移动端line-height垂直居中出现偏移的原因,及解决方法
目前在移动端安卓手机上使用line-height属性,让它的值等于height,结果发现是不居中的.出现了一定位置的偏移情况,如果略微只有两三个像素差距是看不出来的. 左图中的字号是12px,右图中的 ...
随机推荐
- Android学习笔记物理按键事件处理
常见的物理按键: Android为每个物理按键都提供了如下几个回调方法: 代码示例: package com.example.demo3; import androidx.appcompat.app. ...
- cb40a_c++_STL_算法_交换swap_ranges
cb40a_c++_STL_算法_交换swap_rangesswap_ranges(b,e,b2);如果两个容器的数据数量不一致时,只交换一部分数据,a里面3个,b里面5个,则只会交换3个,b里面还有 ...
- Java 多线程基础(八)线程让步
Java 多线程基础(八)线程让步 yield 一.yield 介绍 yield()的作用是让步.它能让当前线程由“运行状态”进入到“就绪状态”,从而让其它具有相同优先级的等待线程获取执行权:但是,并 ...
- .NET Core Hangfire周期性作业调度问题
前言 四月中旬Hangfire团队发布了1.7.11版本,在使用周期性作业调度过程中发现一个问题,这个问题应该一直未解决,故做此记录,希望遇到的童鞋根据项目业务而避开这个问题. 周期性作业调度 我们依 ...
- async/await到底该怎么用?如何理解多线程与异步之间的关系?
前言 如标题所诉,本文主要是解决是什么,怎么用的问题,然后会说明为什么这么用.因为我发现很多萌新都会对之类的问题产生疑惑,包括我最初的我,网络上的博客大多知识零散,刚开始看相关博文的时候,就这样.然后 ...
- Redis - (Linux)安装与配置
Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: 1:Redis支持数据的持久化,可以将内存 ...
- vue 生命周期:
vue 生命周期: 1. beforeCreate()创建组件; 2. created() 创建完成; 3. beforeMounte() 组件被挂裁前; ...
- v-if和v-show的使用和特点
v-if的特点是每次都会重新删除或创建操作 v-show的特点是每次不会进行DOM的删除和创建操作,只是切换了元素的display:none样式 <div id="app"& ...
- postman写测试用例
接口测试引用聚合数据(手机号码归属地)接口 1,点击postman左上角红框+New Collection来创建文件,用来存放测试用例 文件名为号码归属地查询(随意) 2,右击文件选择Add Req ...
- Java工具类——数学相关的类
Java工具类--数学相关的类 在上一篇文章中,我们系统学习了 Java 里面的包装类,那么这篇文章,我们就来学习一下Java提供好的类--数学相关的类. 一.数学类介绍 在最早期学习 Java 基础 ...