我有一个页面，上面有一张图片。 我有四个版本的图像，每个版本都有一个默认的Bootstrap 3断点。 使用桌面浏览器时，图像的表现与我预期的一样（在不同的屏幕尺寸下显示正确的图像版本）。 但是当我在其他设备上测试时（Galaxy S2手机，Nexus 7平板电脑，iPad视网膜显示器）我没有得到预期的结果。
例如，Galaxy S2手机声称拥有480x800px的屏幕。 Bootstrap文档（http://getbootstrap.com/css/#grid）表示小屏幕设置是由＆gt; = 768px触发的，所以我应该在横向方向看到S2中的小屏幕图像，而是使用超小（XS） ）图像。
我在Nexus 7上遇到了类似的问题。文档说它的屏幕是1920x1200，所以我应该看到两个方向上的大屏幕图像，而是我在纵向上获得媒体图像。
与iPad类似。文档说屏幕应该是2048x1563，但是纵向，我看到的是小屏幕图像，而不是中等或大屏幕。
我错过了什么？ 这些设备是否以不同方式报告其屏幕尺寸？
答案 0 :(得分：0)
iPad的设计就像1024x768一样。 2048x1563在技术上是正确的，但这是“Retina显示器”。有些东西告诉我它会与其他设备类似。我知道iPhone 5的宽度是320px。
如果您使用Chrome，请按F12进入开发人员工具，然后点击左上角的小手机。选择您要使用的设备并使用这些尺寸。
这似乎是违反直觉的，但事实就是如此。
我希望这会帮助你！