Css 对于不同的屏幕大小，引导网格未按预期工作

我有一个页面上只有一个图像。 我有四个版本的图像，一个用于默认引导3个断点。 当使用桌面浏览器时，图像的行为与我期望的基本相同，在不同的屏幕大小下显示正确版本的图像。 但当我在其他设备上测试Galaxy S2手机、Nexus 7平板电脑、iPad视网膜显示器时，我并没有得到预期的结果

例如，Galaxy S2手机声称拥有480x800px屏幕。引导文档说小屏幕设置是由>=768px触发的，所以我应该在S2中看到横向时的小屏幕图像，但它使用的是额外的小XS图像

Nexus7也有类似的问题。医生说它的屏幕是1920x1200，所以我应该在任一方向上看到大屏幕图像，但相反，我在纵向上看到的是中等图像

与iPad类似。医生说屏幕应该是2048x1563，但是是纵向的，我看到的是小屏幕图像，而不是中屏幕或大屏幕图像

我错过了什么？

---

这些设备的屏幕大小是否有所不同？

iPad的设计与1024x768一样。2048x1563在技术上是正确的，但这是视网膜显示器。有些东西告诉我，其他设备也会有类似的情况。我知道iPhone5是320像素宽的

如果你使用Chrome，点击F12进入开发者工具，然后点击左上角的小手机。选择要使用的设备并使用这些尺寸标注

这似乎违反直觉，但事实就是如此

我希望这对你有帮助