如何让PhoneGap中的字体大小与桌面端及网页端保持一致？

嘿，我之前也碰到过类似的PhoneGap字体缩放问题，给你几个不用修改字体大小、也不用检测设备的解决思路，亲测有效：

• 设置正确的Viewport元标签
  PhoneGap的WebView默认的视口设置可能和普通移动浏览器有差异，导致文本自动缩放。在HTML的<head>里添加这个标签：

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

  这个配置会锁定视口宽度为设备宽度，初始缩放比例为1，并且禁止用户手动缩放，确保WebView和普通浏览器的渲染基准一致。

• 禁用浏览器文本自动调整
  安卓系统的WebKit内核有个默认特性，会根据容器宽度自动调整文本大小。你可以通过CSS强制关闭这个行为：

  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  

  text-size-adjust: 100%会强制浏览器保持你设置的字体大小，不会自动放大或缩小文本，完美匹配你定义的26px字体。

• 配置PhoneGap的config.xml参数
  打开项目的config.xml，添加这个偏好设置，禁用WebView的视口缩放功能：

  <preference name="EnableViewportScale" value="false" />
  

  这个配置会让PhoneGap的WebView完全遵循你设置的Viewport规则，避免额外的自动调整。

整合后的示例代码 #

把上面的配置加到你的代码里，应该就能解决问题了：

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <style>
    html {
      -webkit-text-size-adjust: 100%;
      -moz-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    body {font:normal 26px arial}
    div{width:200px;height:100px;border:1px solid black}
  </style>
</head>
<body>
  <div>THIS IS A TEST</div>
</body>
</html>

你可以先尝试前两个步骤，大部分情况下就能解决字体缩放的问题，如果还不行再加上config.xml的配置。

内容的提问来源于stack exchange，提问作者CheeseFlavored