breakpoints - 移动和桌面屏幕尺寸统计

Question

我在哪里可以找到有关移动和桌面屏幕尺寸的统计信息？

我正在制作一个响应式网站，特别是我试图找出的天气是大多数手机与台式机和平板电脑用户之间的大小差距，我可以在其中设置断点。我认为应该有，但我知道我应该测试我的假设。

所以要明确一点，我希望手机有一套风格，平板电脑和台式机有另一套风格。

谢谢

Answer 1

我刚刚完成了一个响应式商业网站 (https://plus.google.com/101258044853419629282/posts/GejAf734nP6)，我可以告诉你的是——断点绝对不是 600px!

以下是事实(就 CSS 和 @media 查询而言):

1366px 桌面宽度刚刚超过 1024px 成为最流行的尺寸:http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/

尽管如此，在平板电脑上，1024x768px 的 iPad 是最受欢迎的。

iOS Safari 是理智的，并且总是报告正确的视口(viewport)，即。无论您是普通 iPad 还是 Retina iPad，它都会告诉您它是 1024x768，同样 iPhone 会告诉您它是 320x480。

Android 浏览器存在更多问题，因为该平台上的屏幕各不相同。例如，Nexus One 有一个 480x800 像素的屏幕，但在 254ppi(像素比 1.5)时，报告给 CSS 的视口(viewport)实际上是 360x600。更有趣的 Galaxy Nexus 有一个 1280x720px 的屏幕，分辨率为 316ppi(像素比为 2.0，如 Retina)，报告的视口(viewport)为 360*640。

异常(exception)是 Android 4.0 上的 Chrome Beta，在横向模式下它有一个错误，并且似乎它在 Galaxy Nexus 上报告视口(viewport)宽度为 1280 像素，因此很难不与桌面 CSS 发生冲突。

结论

我个人使用了 768px 屏幕宽度的断点，即:我将横屏的 iPad 视为桌面，假设最小桌面尺寸为 1024px。但我也可以假设它是 800 像素，就像过去一样。然后，我专门为 iPad 肖像处理 768px，因为非视网膜 iPad 有很多空间，它还不是小屏幕。然后，我将小于 768px 的所有内容称为小屏幕智能手机。

为获得最大优化，您可以在 640px、600px、480px、360px、320px 甚至 240px(低端机器人)处使用临时断点，但最好将其完全基于 % 低于 768px，以便自动适应。

更新 : 我发现一个有用的断点是 810px - Facebook 标签中 iframe 的宽度。当您创建 FB 应用程序并希望重用您的 webapp 代码时很有帮助。