网页在所有浏览器上运行良好，除了 Android 浏览器，它显示的字体大小增加答案

【问题标题】：webpage works well on all browsers except Android Browser, which shows fonts with increased size网页在所有浏览器上运行良好，除了 Android 浏览器，它显示的字体大小增加
【发布时间】：2014-07-21 06:00:19
【问题描述】：

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

以下视口适用于 iPhone 5 和移动浏览器（如移动 chrome）。

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

..我宁愿不改变它。

我还做了一些在移动设备上运行良好的媒体查询。

@media only screen and (min-width : 150px) and (max-width : 420px)
@media only screen and (min-width : 150px) and (max-width : 980px)

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

我尝试了 CSS font-size-adjust 和 text-size-adjust 但我无法解决帽子问题，相反我在各种浏览器中得到不同的输出。

【问题讨论】：

标签： android html css fonts

【解决方案1】：

这听起来像是密度问题。将target-densitydpi 添加到视口标签。请记住，这将用于 GB 而不是更大的设备。查看http://www.petelepage.com/blog/2013/02/viewport-target-densitydpi-support-is-being-deprecated/了解更多详情。

【讨论】：

不幸的是，Android 浏览器（Android 4.2）不响应 target-densitydpi。正如你已经提到的 - >已弃用。

【解决方案2】：

经过一个不眠之夜，我发现自己找到了一个可行的解决方案。

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

使用第一个 if 语句，我避免像素更改也出现在 chrome android 浏览器中，嵌套的 if 语句针对 android 浏览器。

 <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>

这个脚本可能也可以针对其他安卓浏览器进行优化，因为我没有全部测试。

【讨论】：