5

我有一个项目在 iPhone 上以 0.5ems链接显示16px 文本字体非常好。

但是，当我切换到 Android 浏览器时，文本字体会自行放大，并且我的链接位置会出错。

我的链接在一个

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

陈述。

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

编辑：

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

4

4 回答 4

3

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

为了解决这个问题，我把它放在<head>:中<meta name='viewport' content='width=device-width, initial-scale=.5, maximum-scale=.5'>，这样普通手机就会按我的预期缩放，而视网膜显示屏也会适当地缩放（半比例）。

我不确定您使用的是哪种设计，但我会尝试使用初始比例和最大比例，尝试 0.5 和 1 看看你会得到什么。

于 2012-06-18T20:40:28.750 回答
2

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

这篇文章很好地涵盖了这个主题：http: //kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

于 2012-06-10T05:28:09.683 回答
2

我发现了一个可能有助于解决另一个问题的设置，即iPhone 上的字体大小呈现不一致：

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

另一个问题描述了另一个值，iPhone 的字体大小问题：

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

似乎其中之一可能会阻止 android 浏览器调整大小。希望这可以帮助。

于 2012-06-18T21:46:19.140 回答
0

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

target-densitydpi=device-dpi

这是一个很好的参考：

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

于 2012-06-22T07:17:30.603 回答