安卓浏览器会自动调整文字大小

Question

5

我有一个项目，在iPhone上完美地显示0.5ems的16像素文本字体链接。

然而，当我切换到Android浏览器时，文本字体会自动放大，我的链接定位也出了问题。

我的链接在一个

<p><a>[Link]</a></p>

陈述。

有没有办法防止Android文本自行调整大小？或者有更好的解决方案吗？

编辑：

我刚刚意识到Android浏览器也不允许自动滚动。为什么会这样？iPhone和Android浏览器不都是使用Webkit作为基础吗？即使它们使用相同的技术，为什么它们还是如此不同？我需要在CSS中声明任何额外的属性才能使其与Safari相同吗？

- Kyle Yeo

我刚刚意识到安卓浏览器不支持自动滚动。为什么会这样？难道iPhone和安卓浏览器不都是基于Webkit技术吗？尽管它们使用相同的技术，为什么它们还是如此不同？我是否需要在CSS中声明任何额外属性才能使其与Safari对应部分的工作方式相同？ - Kyle Yeo

你能展示一下Android和手机的截图，以便我们真正看到它们之间的区别吗？ :) - Sófka

嗯，我在Android上如何截屏？ - Kyle Yeo

在我的安卓设备上，如果你长按电源键，它会给你一个截屏的选项（顺便说一下，我正在使用姜饼系统）。 - Suvi Vignarajah

我正在为此创建另一个媒体查询，它在480 max-device-width以下。这很好用。也许是因为我的网站是一个更注重内容的网站，因此在所有浏览器上进行缩放会成为问题。 - Kyle Yeo

4个回答

2

我在另一个问题中找到了一个可能有帮助的设置，iPhone上字体大小呈现的不一致性:

body {
    -webkit-text-size-adjust: 100%;
}

在另一个问题中描述了一种备选值，iPhone字体大小问题:

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

看起来其中一个可能会防止Android浏览器调整大小。希望可以帮到您。

- trebormf

2

如果你使用像素(px)，那么它与屏幕像素密度有关。iPhone的“视网膜”显示屏会以不同的方式显示文本，与你的Android设备不同。

- LeigerGaming

问题是，我在 body 语句中只有一个 px 元素。我的其余 CSS 媒体查询都是以 em 为单位的。这个单独的 px 是否会影响其他部分？我已经尝试更改大小，但它仍然保持不变。 - Kyle Yeo

@RenoYeo 嗯。我上面链接的那篇文章的附录建议使用百分比（%）来设置 body 元素的字体大小，而不是像素（px）。这样做应该意味着无论屏幕尺寸如何，都可以很好地缩放。有帮助吗？ - LeigerGaming

所以100%实际上是16px，对吧？我会尝试并告诉你结果。 - Kyle Yeo

不行，这会导致我的iPhone文本也重新调整大小。现在我有iPhone和Android链接文本，它们的大小巨大，会自行移位。 - Kyle Yeo

0

如果您想阻止Android自动缩放像素值，可以尝试将以下内容添加到您的视口元数据中：

target-densitydpi=device-dpi

这里有一个关于同样问题的好参考：

- nEx.Software

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- LOLapalooza · Accepted Answer

我也遇到了类似的问题。我的设计是专门为Retina显示屏设计的，但实际上Retina显示屏的像素密度是2，因此一个像素不一定就是一个像素（非Retina iPhone像素宽度：320px，Retina：640px）。

为解决这个问题，我在< head >中加入了以下代码：，这样普通手机将按照我的预期进行缩放，而Retina显示屏将适当地进行缩放（半倍比例）。

我不确定你使用的是什么设计，但我建议尝试调整initial-scale和maximum-scale，尝试使用0.5和1来查看效果。