网页在除Android浏览器外的所有浏览器上都能正常工作，Android浏览器显示的字体大小增加

我创建了一个网页，适用于所有主要浏览器。我测试并采用了该网站，并将其应用于移动浏览器。不幸的是，在Android浏览器上开发时，我没有测试页面，也不知道问题所在（Android 4.2）

以下视口适用于iPhone 5和移动浏览器，如mobile chrome

  <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimal-ui">

这个网页被包装在一个977px的容器中，我使用24px和16px的字体，这两种字体在Android浏览器（Android 4.2）上都显示得更大。 有人对如何解决字体问题提出建议吗

---

我尝试了CSS字体大小调整和文本大小调整，但我无法解决hat问题，相反，我在不同的浏览器中得到不同的输出。

听起来像是密度问题。将

目标密度dpi

添加到视口标记。请记住，这将用于GB，但不会用于更大的设备。更多详情，请查看此链接。

经过一个不眠之夜，我找到了一个有效的解决方案

我将Javascript/JQuery脚本放在“body”部分的末尾，以减小android浏览器中的字体大小，以适应主导航栏

对于第一个if语句，我避免了像素变化也出现在chrome安卓浏览器中，嵌套的if语句以安卓浏览器为目标

 <script>

    if(!(navigator.userAgent.toLowerCase().indexOf('chrome') > -1)) {
        if (navigator.userAgent.toLowerCase().indexOf('android') > -1)  {
               $('#mainnav nav ul li a').css('font-size','18px'); 
         }

    }

 </script>

if（！（navigator.userAgent.toLowerCase（）.indexOf（'chrome'）>-1））{
if（navigator.userAgent.toLowerCase（）.indexOf（'android'）>-1）{
$（'mainnav nav ul li a'）.css（'font-size'，'18px'）；
}
}

---

这个脚本可能也可以针对其他android浏览器进行优化，因为我没有测试所有内容。

不幸的是，android浏览器（android 4.2）没有响应目标densitydpi。正如您已经提到的-->已弃用。

 <script>

    if(!(navigator.userAgent.toLowerCase().indexOf('chrome') > -1)) {
        if (navigator.userAgent.toLowerCase().indexOf('android') > -1)  {
               $('#mainnav nav ul li a').css('font-size','18px'); 
         }

    }

 </script>