目前，我对针对智能手机的媒体查询感到恼火。这是我第一次使用媒体查询。
我已经完成了网站的平板电脑版本（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)
希望您能为我提供帮助，因为问题太多了，所以我在这个问题上陷入了困境。
最佳答案
您是否设置了正确的视口？喜欢：
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=2.0" />
把它放在你的头标签中。
关于html - iPhone 3G和Xperia X8的响应式网站/媒体查询问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13199617/