解决安卓字体偏移：页面整体缩放

　　在h5中实现一些小标签、按钮的时候，很容易发现部分安卓机型上的字体显示有问题，总会向上偏移2px左右。这是设置padding或line-height无法修复的，与rem也无关，即使在字体大于12px时依然存在。下图来自于网友的分享，从左到右依次是显示正常的苹果、显示正常的安卓、显示异常的安卓：

　　可能是部分机型对webview字体的渲染机制存在问题，导致所有字体都偏移，只是在小图标上看起来更明显罢了。

　　transform缩放对此有较好的修复作用，但是对每个有文字的地方都应用scale也太麻烦了。在h5页面头部通常都会写上viewport标签，我们可以将viewport的scale设为0.5来达到页面整体缩放的效果，也可以修正字体偏移。

<meta name="viewport" content="width=device-width,initial-scale=0.5, maximum-scale=0.5, user-scalable=no">

　　如果从UI那儿拿到的高保真效果图的分辨率宽度是750，但是一般机型渲染页面的逻辑分辨率也就三四百，于是你想以375的宽度为基准来写页面。375/750=0.5，设置viewport的scale为0.5之后，就可以从图上量多少长宽就在代码里写多少px，都不用换算的。

更多专业前端知识，请上【猿2048】www.mk2048.com

解决安卓字体偏移：页面整体缩放相关推荐

解决安卓App启动页面会闪一下
在安卓中,我们的App都会独享一个Liunx虚拟机,我们启动一个app也类似与你的手机开启启动一样,App的运行环境需要有一个加载过程,这个加载过程页面,我们安卓开发人员就称它为App的启动页面. 一 ...
解决安卓手机H5页面input获得焦点时页面挤压或者底部上移
在安卓手机上,如果底部有一个定位的元素比如一个input 或者一个 footer 在正常情况下是没有问题的, 但是一旦input获得焦点,那么定位元素会被软键盘向上推,ios手机没有问题此时解决办 ...
对Latex表格字体进行整体缩放，不会改变字体样式
使用\tiny 等命令对表格进行整体缩放后, 会改变字体的样式,很难看. 使用\resizebox{1\columnwidth}{!}可以自适应调节字体及表格的大小. \begin{table*}[w ...
关于webview中安卓和苹果页面缩放不同的问题
关于webview中安卓和苹果页面缩放的问题这是我在工作中自己遇到的问题,踩到的坑我遇到的问题是这样的,验证码用的是webView的组件,在运行时发现安卓和苹果的验证码的大小不一致,而且苹果的验证 ...
解决uni-app微信小程序底部input输入框，键盘弹起时页面整体上移问题
一.存在的问题: 微信小程序聊天界面,当input 框获取焦点时会自动调起手机键盘,当键盘弹起时,会导致页面整体上移,页面头信息会消失不见. 二.需要实现的效果键盘弹出时, 底部的 ...
html手机自动放大,解决HTML5手机端页面缩放的问题
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: 或者是那么我们来对这句话解释一下就是: viewport : 表示的是显示窗口: width=d ...
解决uni-app微信小程序input输入框在底部时，键盘弹起页面整体上移问题
问题描述: 最近的做了个客服聊天的功能,遇到一个问题如下: 在手机上点击聊天页底部的input框后,键盘弹起同时页面会整体上移,标题栏被顶上去了.如下图: 问题分析: input 获取焦点时会自动调起 ...
js整体缩小网页_js实现整体缩放页面适配移动端
大家在适配页面的Web端和移动端时候,如果不需要那么麻烦,就可以使用js进行整体缩放,只需要引入一个js,改动htmll头部代码即可切记: 1.该 JS 应在 head 中尽可能早的引入,减少重绘. ...
html页面手机自动缩放,解决HTML5手机端页面缩放的问题
通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: 或者是那么我们来对这句话解释一下就是: viewport : 表示的是显示窗口: width=d ...

解决安卓字体偏移：页面整体缩放

解决安卓字体偏移：页面整体缩放相关推荐

最新文章

热门文章