摘要：在中实现一些小标签按钮的时候，很容易发现部分安卓机型上的字体显示有问题，总会向上偏移左右。在页面头部通常都会写上标签，我们可以将的设为来达到页面整体缩放的效果，也可以修正字体偏移。
在h5中实现一些小标签、按钮的时候，很容易发现部分安卓机型上的字体显示有问题，总会向上偏移2px左右。这是设置padding或line-height无法修复的，与rem也无关，即使在字体大于12px时依然存在。下图来自于网友的分享，从左到右依次是显示正常的苹果、显示正常的安卓、显示异常的安卓：
可能是部分机型对webview字体的渲染机制存在问题，导致所有字体都偏移，只是在小图标上看起来更明显罢了。
transform缩放对此有较好的修复作用，但是对每个有文字的地方都应用scale也太麻烦了。在h5页面头部通常都会写上viewport标签，我们可以将viewport的scale设为0.5来达到页面整体缩放的效果，也可以修正字体偏移。
如果从UI那儿拿到的高保真效果图的分辨率宽度是750，但是一般机型渲染页面的逻辑分辨率也就三四百，于是你想以375的宽度为基准来写页面。375/750=0.5，设置viewport的scale为0.5之后，就可以从图上量多少长宽就在代码里写多少px，都不用换算的。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/1721.html
摘要：暂时排除脚本原因。移除二维码所有样式，发现并不是不能识别到二维码而是识别区域发生了偏移。图移除所有元素，页面上只留一张二维码，发现识别区域变大。由此产生的问题和猜测问题就是元素偏移了。。。 一、问题概述 在开发一个含有二维码的微信页面时，我遇到了这样一个问题：使用iPhone第一次进入该页面时，二维码可以长按识别，但第二次进入时长按无法识别到二维码。安卓机都能识别。 二、我和同事进行了...
摘要：暂时排除脚本原因。移除二维码所有样式，发现并不是不能识别到二维码而是识别区域发生了偏移。图移除所有元素，页面上只留一张二维码，发现识别区域变大。由此产生的问题和猜测问题就是元素偏移了。。。 一、问题概述 在开发一个含有二维码的微信页面时，我遇到了这样一个问题：使用iPhone第一次进入该页面时，二维码可以长按识别，但第二次进入时长按无法识别到二维码。安卓机都能识别。 二、我和同事进行了...
摘要：谈谈的屏与安卓的各种屏布局也好，用进行缩放也罢，文字的适配问题也是，都是基于我们想对各个不同的设备所进行的匹配。 感谢csdn原文：浅谈前端移动端页面开发（布局篇）感谢：移动前端自适应解决方案和比较使用Flexible实现手淘H5页面的终端适配 一. viewport 什么是viewport简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽...
摘要：做移动端自适应时可能很多人都对自适应和之间的关系产生疑问也有一些人会疑虑比如我的自适应方案没有加会不会出问题针对这些疑问我说一下我的见解。 做移动端自适应时可能很多人都对自适应和dpr之间的关系产生疑问,也有一些人会疑虑比如我的自适应方案没有加dpr会不会出问题,针对这些疑问我说一下我的见解。 1. 什么是尺寸自适应 首先标题说的自适应,可能自适应在不同人眼里理解不同，特别与响应式的关...
阅读 3658·2021-11-17 09:33
阅读 929·2021-10-09 09:44
阅读 285·2019-08-30 13:59
阅读 3225·2019-08-30 11:26
阅读 2058·2019-08-29 16:56
阅读 2726·2019-08-29 14:22
阅读 3056·2019-08-29 12:11
阅读 1140·2019-08-29 10:58
