iPhone 3G和Xperia X8的响应式网站/媒体查询问题

Question

我目前对我的媒体查询感到恼火，目标是智能手机。这是我第一次使用媒体查询。

我已经完成了一个网站的平板电脑版本（768px）和一个电话版本（320px）。

请注意，这些屏幕截图实际上是Firefox截图。 如您所见，当我在Firefox，IE，Webkit上调整窗口大小时，这些显示工作正常。

但是，我的iPhone 3G和Xperia X8显示屏错误。

以下是结果（左侧iPhone，右侧Xperia）：

据我所知，这两款手机的分辨率均为480 * 320像素。 那么，为什么会有这样的结果？

在iPhone屏幕上，标题上的浅棕色矩形应为300px宽度。它为什么这么小？

为什么平板电脑版本会加载到Xperia上？

我在CSS上使用这些媒体查询：

/ *平板电脑----------- * /

@media  (min-width: 768px) and (max-width:1023px)

/ *电话* /

@media (min-device-width: 320px) and (max-device-width:767px),
        (min-width: 320px) and (max-width:767px)

我希望你能帮助我，因为太多日子我一直坚持这个问题。

Answer 1

您是否设置了正确的视口？像：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0" />

将它放在头标中。

Answer 2

使用适当的媒体查询以确保智能手机和跨平台的完美呈现和响应能力。这里是您可以学习如何正确使用媒体查询的链接。 css tricks