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

Question

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

我已经完成了网站的平板电脑版本 (768px) 和手机版本 (320px)。

请注意，这些屏幕截图实际上是 Firefox 屏幕截图。如您所见，当我在 Firefox、IE、Webkit 上调整窗口大小时，这些显示效果很好。

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

这是结果(左 iPhone，右 Xperia):

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

在 iPhone 屏幕上，标题上的浅棕色矩形应该是 300 像素宽。为什么这么小？

为什么在 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

您是否设置了合适的视口(viewport)？喜欢:

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

把它放在你的 head 标签中。