Question

我有一个项目，在iPhone上显示 16px文本字体在0.5周链接完全正常。

但是，当我切换到Android浏览器时，文本字体会自动扩大，并且链接的位置会被搞定。

我的链接位于

中

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

语句。

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

编辑：

我刚刚意识到Android浏览器也不允许自动滚动。为什么会这样？使用webkits作为基础的iPhone和Android浏览器都不是吗？即使他们使用相同的技术，为什么他们如此不同？我是否应该在CSS中声明任何额外的属性，以使其与Safari对应物一样工作？

Answer 1

我也有类似的问题。我有一个专门为Retina显示器设计的设计，但视网膜显示器实际上具有2的像素密度，因此像素不一定是像素（非视网膜iphone像素宽度：320px，视网膜：640px）。 p>

为了解决这个问题，我将其放在<head>：<meta name='viewport' content='width=device-width, initial-scale=.5, maximum-scale=.5'>中，以便普通手机按照我的预期进行缩放，并且视网膜显示屏会适当缩放（半刻度）。

我不确定你正在使用什么样的设计，但是我会玩初始规模和最大规模，尝试.5和1，看看你得到了什么。

Answer 2

如果使用像素（px），则与屏幕像素密度有关。 iPhone“视网膜”显示屏会以不同的方式显示Android设备的文字。

本文很好地介绍了这个主题：http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

Answer 3

我找到了一个可能有助于另一个问题的设置，Font size rendering inconsistencies on an iPhone：

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

另一个问题Font size issue with iPhone中描述了另一个值：

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

似乎其中一个可能会阻止Android浏览器调整大小。希望这会有所帮助。

Answer 4

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

target-densitydpi=device-dpi

以下是一个很好的参考：

http://designbycode.tumblr.com/post/1127120282/pixel-perfect-android-web-ui

Android浏览器会自动调整文本大小

4 个答案: