摘要:最近开发移动端,发现安卓端对于文字垂直居中的问题兼容性不好,网上也搜了很多方法,但是都比较麻烦,自己摸索出来了最终的解决方案首先在头部把我们常用的改为。
最近开发移动端APP,发现安卓端对于文字垂直居中的问题兼容性不好,网上也搜了很多方法,但是都比较麻烦,自己摸索出来了最终的解决方案:
1、首先在html头部把我们常用的lang="en"改为lang="zh-cmn-Hans"。
此设置会导致安卓端和iOS端的密码输入符会出现问题:
iOS端:(密码符号变大)
安卓端:(密码符号变小)
我们可以对需要密码框的页面多带带使用lang="en"的设置。
2、其次将中的font-family中设置的文字样式只保留以下两个:
font-family: -apple-system-font, sans-serif;
并将 Helvetica,Arial等字体删除,这些字体是造成安卓端文字无法垂直居中的主要原因。
当然删除这些字体会带来页面中的数字会发生变化:
这是不设置Helvetica等字体的数字样式:
这是设置了Helvetica等字体的数字样式:
因此我们若要处理一些重要的数字时,可以多带带对其设置字体样式。
最后附上按照我的方法处理前后的两张截图:
处理前:
处理后:
处理后,我的积分和签到 +5积分均处于垂直居中状态。
PS:此方法并不能解决移动端font-size小于12px以下出现的不能垂直居中问题。可能还需要各位用其它方式来解决。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/111837.html
摘要:最近开发移动端,发现安卓端对于文字垂直居中的问题兼容性不好,网上也搜了很多方法,但是都比较麻烦,自己摸索出来了最终的解决方案首先在头部把我们常用的改为。 最近开发移动端APP,发现安卓端对于文字垂直居中的问题兼容性不好,网上也搜了很多方法,但是都比较麻烦,自己摸索出来了最终的解决方案: 1、首先在html头部把我们常用的lang=en改为lang=zh-cmn-Hans。 此设置...
摘要:想写出高效合理的布局,必须以深厚的基础为前提。现在布局方式主要分为三种传统布局方案等配合。弹性布局,实现方便,兼容性较好。在环境中的元素按照如下规则渲染和文档流一样,元素按照自己类型的布局特性从左到右,从上往下依次排列。 前端css布局知识繁杂,实现方式多种多样。想写出高效、合理的布局,必须以深厚的css基础为前提。为了方便记忆和复习,将css布局要点记录如下。内容较多,应用方面说的不...
摘要:两个小栗子讲完了,你明白了么文章末尾,再送两个小栗子当一个里没有内容时高度为,当有内容比如文字时,就有了高度,难道是文字把撑开了其实不是,这个高度是由元素的决定的。代码很简单使用布局也可以实现居中红色框上下居中文字在红色框中居中 之前学习垂直居中的时候在网上找了很多方法,看的我眼花撩乱,一直想着整理一下思路,透过那些纷繁的招式看到本质。首先明确一下概念: left是指子元素的左mar...
阅读 3080·2021-11-24 09:38
阅读 1332·2021-09-22 15:27
阅读 2969·2021-09-10 10:51
阅读 1505·2021-09-09 09:33
阅读 918·2021-08-09 13:47
阅读 2075·2019-08-30 13:05
阅读 893·2019-08-29 15:15
阅读 2427·2019-08-29 12:21