我目前对针对智能手机的媒体查询感到恼火。这是我第一次使用媒体查询。
我已经做了一个网站的平板版本（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)
我希望你能帮助我，因为太多天我一直在这个问题上。