Android网页浏览器中HTML设置font-size不生效问题求助

可行解决方案 #

你遇到的问题是Android移动端浏览器默认的文本自动调整策略和视口适配规则导致的样式失效，按以下步骤修改即可：

• 第一步：在<head>标签中添加viewport视口配置，让移动端浏览器以原始像素比例渲染页面，避免默认缩放
• 第二步：在全局CSS中添加text-size-adjust相关规则，禁用浏览器自动调整字体大小的默认行为

调整后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<!-- 新增viewport配置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
/* 新增禁用字体自动调整规则，兼容WebKit内核浏览器 */
* {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
a {
    font-size: 25px;
}
</style>
</head>
<body>
<a href="https://www.google.com/">Some text</a><br>
</body>
</html>

额外说明 #

如果仍有个别浏览器不生效，可以尝试以下补充方案：

• 给a标签设置display: inline-block属性，避免行内元素的字体计算被浏览器特殊处理
• 字体单位可以尝试替换为rem适配移动端，25px对应约15.625rem（根元素font-size设为16px的场景）

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