zoukankan      html  css  js  c++  java
  • 解决安卓字体偏移:页面整体缩放

      在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,都不用换算的。

  • 相关阅读:
    [Luogu5042/UOJ #100][国家集训队互测2015]丢失的题面/ydc的题面
    [51nod1773]A国的贸易
    [GZOI2019&GXOI2019]省选GG记
    [51nod1659]数方块
    [51nod1052]最大M子段和
    [51nod1201]整数划分
    [51nod1084]矩阵取数问题 V2
    [51nod1020]逆序排列
    [BZOJ3000]Big Number
    [BZOJ1684][Usaco2005 Oct]Close Encounter
  • 原文地址:https://www.cnblogs.com/yangshifu/p/9766584.html
Copyright © 2011-2022 走看看