blocks|key|531772|text|这就是所谓的“字体提升”，在这个WebKit+bug中有更详细的描述。目前还没有办法禁用它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|531773|entityMap|0|LINK|mutability|MUTABLE|url|https://bugs.webkit.org/show_bug.cgi?id=84186^0|G|A|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

This is called "font boosting" and is described in some detail in this <a href="https://bugs.webkit.org/show_bug.cgi?id=84186" rel="nofollow">WebKit bug</a>. There's currently no way to disable it.

blocks|key|314878|text|我为我的页面找到了一个解决方案:给父元素一个宽度和高度！字体不会超出这些边界，因此它将保持较小(Er)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|314879|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

I found a solution for my pages: give the parent element a width and height! The font will not go outside those borders, and so it will remain small(er).

blocks|key|314909|text|将max-height:+999999px;添加到要阻止字体提升的元素或其父元素。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|314910|entityMap^0|1|L|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Add <code>max-height: 999999px;</code> to the element you want to prevent font boosting on, or its parent.

blocks|key|314957|text|在文档<head>中包含以下<meta>标记|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|314958|<meta+name="viewport"+content="width=device-width,+initial-scale=1">|314959|这将正确地建立图幅，从而消除对"FontBoosting“的需要。|314960|entityMap^0|3|6|E|6|0|0|1W|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|U|8|@]|D|@]|E|$]]]|K|$]]

Include the following <code>&lt;meta&gt;</code> tag in the document <code>&lt;head&gt;</code>:

<code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;</code>

This will correctly establish the view frame, and thus eliminate the need for "FontBoosting".

blocks|key|315008|text|经过一些测试，这条规则帮了我大忙。必须根据div/table结构添加到包含增强文本的元素或其父元素中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|315009|element+or+parent+element+{+
++++/*+prevent+font+boosting+on+mobile+devices+*/
++++width:+100%25;
++++height:+auto;
++++min-height:+1px;
++++max-height:+999999px;
}|code-block|syntax|javascript|315010|也许宽度和高度值必须根据您的需要进行修正。|315011|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

After some tests this rule helped me out. Must be added either to the element containing boosted text or it's parent depending on the div/table structure.

<pre><code>element or parent element { 
 /* prevent font boosting on mobile devices */
 width: 100%;
 height: auto;
 min-height: 1px;
 max-height: 999999px;
}
</code></pre>

Maybe the width and heigth values must be corrected according your needs.

blocks|key|531994|text|把这个放到你的重置里。html+*+{max-height:1000000px;}|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|531995|entityMap^0|B|U|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Put this in your reset. <code>html * {max-height:1000000px;}</code>

blocks|key|532042|text|现在，您可以设置一个CSS属性来控制此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|532043|-webkit-text-size-adjust:+none;
-moz-text-size-adjust:+none;
-ms-text-size-adjust:+none;|code-block|syntax|javascript|532044|请参阅https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust|offset|length|532045|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust^0|0|0|3|1T|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

There is now a CSS property you can set to control this:

<pre><code>-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
</code></pre>

See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust</a>

Apparently once paragraph of text reaches a certain length, Google Chrome on Android decides to resize the text and make it larger (causing all kinds of fun). Now I have a website where about half of the <code>p</code>-tags follow the size I've set and the other half change as they please - apparently depending on the length of the paragraph.

How on earth do I fix this?

Chrome on Android resizes font

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

显然，一旦文本段落达到一定长度，Android上的Google Chrome就会决定调整文本大小，使其变大(这会带来各种乐趣)。现在我有了一个网站，其中大约一半的p-tags遵循我设置的大小，另一半则随自己的喜好改变--显然这取决于段落的长度。我到底该怎么解决这个问题呢？

问Android上的Chrome调整字体大小
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Android上的Chrome调整字体大小EN