我在哪里可以找到有关移动和桌面屏幕尺寸的统计信息？
我正在制作一个响应式网站，特别是我试图找出的天气是大多数手机与台式机和平板电脑用户之间的大小差距，我可以在其中设置断点。我认为应该有，但我知道我应该测试我的假设。
所以要明确一点，我希望手机有一套风格，平板电脑和台式机有另一套风格。
谢谢
问问题
45193 次
4 回答
41
我刚刚完成了一个响应式商业网站（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-现在-1366x768/
尽管如此，在平板电脑上，1024x768px 的 iPad 是最受欢迎的。
iOS Safari 是理智的，并且总是报告正确的视口，即。无论您是普通 iPad 还是 Retina iPad，它都会告诉您它是 1024x768，同样 iPhone 会告诉您它是 320x480。
Android 浏览器存在更多问题，因为该平台上的屏幕各不相同。例如，Nexus One 有一个 480x800 像素的屏幕，但在 254ppi（像素比 1.5）时，报告给 CSS 的视口实际上是 360x600。更有趣的 Galaxy Nexus 有一个 1280x720px 的屏幕，分辨率为 316ppi（像素比为 2.0，如 Retina），报告的视口为 360*640。
例外是 Android 4.0 上的 Chrome Beta，在横向模式下它有一个错误，并且似乎它在 Galaxy Nexus 上报告视口宽度为 1280 像素，因此很难不与桌面 CSS 发生冲突。
结论
我个人使用了 768px 屏幕宽度的断点，即：我将横屏的 iPad 视为桌面，假设最小桌面尺寸为 1024px。但我也可以假设它是 800 像素，就像过去一样。然后，我专门为 iPad 肖像处理 768px，因为非视网膜 iPad 有很多空间，它还不是小屏幕。然后，我将小于 768px 的所有内容称为小屏幕智能手机。
为了最大程度地优化，您可以在 640px、600px、480px、360px、320px 甚至 240px（低端机器人）处使用临时断点，但最好将其完全基于 % 低于 768px，以便自动适应。
更新：我发现一个有用的断点是 810px - Facebook 选项卡中 iframe 的宽度。当您创建 FB 应用程序并希望重用您的 webapp 代码时很有帮助。
于 2012-04-17T20:02:42.253 回答
2
有关最新的分辨率统计信息，请更改此网址中的日期范围：http: //gs.statcounter.com/#resolution-na-monthly-200903-201401
在我建立的项目中，我们在 1024px 宽度上设置了媒体查询断点，因为这是 iPad 1、2 和 Mini 的宽度，下方是“移动”，上方是 iPad+桌面。
这就是@nytimes 开发人员的做法。请参阅：JavaScript Jabber Podcast 093：http: //javascriptjabber.com/093-jsj-the-new-york-times-and-javascript-with-eitan-konigsburg-alastair-coote-and-reed-emmons/ 他们在哪里描述这是10:40。
如需更全面的设备分辨率列表：http: //mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/
与往常一样，这取决于 您的目标人群。如果您正在为孩子构建网站/应用程序（其中许多人将使用低端 android），您可能需要一个断点为 320 像素（宽度）的“超移动”版本。
于 2014-02-20T10:47:01.920 回答
0
960 x 800 x 768 x 640 x 480 x 360 是响应式网页设计必须遵循的尺寸
于 2013-05-02T04:19:33.937 回答
0
如果有人查看statcounter.com并将这些数字与W3C等来源进行比较，那么可能会怀疑他们是如何获得这些数字的。
于 2014-09-13T22:23:59.107 回答