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

  • 相关阅读:
    java导出pdf格式文档
    本地文件夹选择框
    将文件解除占用
    Windows 进入上帝模式窗口
    Windows 10 系统获取密钥方法
    CentOS7 systemctl 命令
    一键立即息屏
    定时关闭程序
    CentOS 7 FTP的安装与配置
    SQL基础
  • 原文地址:https://www.cnblogs.com/yangshifu/p/9766584.html
Copyright © 2011-2022 走看看