1

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

我们确实-webkit-text-size-adjust: none为所有元素准备好了（使用星号 *）。有安卓等价物吗？有没有人在任何安卓设备上遇到过这种情况？

此行为并非在所有 android 设备上都会发生。我们只在 Android 4.x 上看到过这个，但我无法用我的 android 4.0 模拟器重现它。

它目前的样子： 在此处输入图像描述

它应该是什么样子： 在此处输入图像描述

（我没有屏幕帽中使用的具体设备型号）

4

2 回答 2

3

在 CSS 中，像素不是像素。

或者更确切地说，1 个 CSS 像素并不总是映射到 1 个硬件像素。在某些高 DPI Android 设备上，一个 CSS 像素可以是 1.5 或 2 个硬件像素。Opera人员对该主题有很好的概述。

于 2012-03-29T18:01:28.597 回答
1

塞缪尔的回答是正确的。

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

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

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

于 2012-11-19T18:03:28.173 回答