为什么这个Android设备会放大文字？

Question

该网站为tavistockrestaurants.com。我们正努力使这种设计在流行的移动设备中运行良好。一个特定的Android设备似乎正在扩大文本，我不确定为什么。这会导致顶部的“联系”链接换行，并导致整个网站出现不必要的换行符。请注意，此截图中的图像被压缩到图像下方？它应该在底部有空白区域！

我们对所有元素都有-webkit-text-size-adjust: none（使用星号*）。有一个Android equivelant？有没有人在任何Android设备上体验过这个？

在所有Android设备上都不会出现此问题。我们只在Android 4.x上看过这个，但我无法用我的android 4.0模拟器重现它。

目前的情况如下：

它应该是什么样的：

（我没有在屏幕上使用的特定设备型号）

Answer 1

在CSS中，像素不是像素。

或者更确切地说，1个CSS像素并不总是映射到1个硬件像素。在某些高DPI Android设备上，一个CSS像素可以是1.5或2个硬件像素。歌剧家have a good overview on the topic.

Answer 2

Samuels的回答是正确的。

虽然有一种解决方法。您可以使用类或样式表来定位特定设备并更改该设备的样式。如果您使用PHP，您应该能够解析“User-Agent”并确定客户端正在使用哪个设备，并将一个类添加到body标签（并使用该类来定位CSS中的特定设备）。

还有一些服务允许您根据用户使用的设备将用户发送到不同版本的站点。 Here是一个为您工作的网站。

加载页面时可能还会生成特定于设备的CSS。使用CSS重置也可以帮助您的网站更加跨浏览器兼容。