移动和桌面屏幕大小统计信息

时间:2012-04-05 15:13:09

标签: breakpoints responsive-design

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

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

所以,为了清楚起见,我希望手机拥有一套样式,而平板电脑和台式机则需要另外一套。

谢谢

4 个答案:

答案 0 :(得分:41)

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

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

  1. 1366px桌面宽度刚刚超过1024px,是最受欢迎的尺寸:http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/

  2. 不过,在平板电脑上,iPad及其1024x768px是最受欢迎的。

  3. iOS Safari是理智的,并始终报告正确的视口,即。无论你有普通的iPad还是Retina iPad,它都会告诉你它是1024x768,类似的iPhone会告诉你它是320x480。

  4. Android浏览器存在更多问题,因为此平台的屏幕不同。例如,Nexus One的屏幕为480x800px,但在254ppi(像素比率为1.5)时,向CSS报告的视口实际上是360x600。即便有趣的Galaxy Nexus也有一个1280x720px的屏幕,频率为316ppi(像素比率为2.0,与Retina一样),据报道视频为360 * 640。

  5. 例外是Android 4.0上的Chrome测试版,在横向模式下它有一个错误,似乎它在该Galaxy Nexus上报告视口宽度为1280像素,这使得很难不与桌面CSS发生冲突。

    <强>结论

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

    为了获得最大的优化,您可以使用640px,600px,480px,360px,320px甚至240px(低端低速机器人)的临时断点,但这可能是一个很好的做法,使它完全基于% - 低于768px,因此它适合自动。

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

答案 1 :(得分:2)

对于最新解决方案统计信息,请更改此网址中的日期范围: http://gs.statcounter.com/#resolution-na-monthly-200903-201401

在我构建的项目中,我们在1024px宽度上有媒体查询断点,因为这是iPad 1,2和2的宽度。 Mini下面的所有内容都是“Mobile”,上面的所有内容都是iPad + Desktop。

这是@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 )构建网站/应用,您可能需要一个具有断点的“超移动”版本在320px(宽度)。

答案 2 :(得分:0)

960 x 800 x 768 x 640 x 480 x 360是响应式网页设计必须遵循的尺寸

答案 3 :(得分:0)

如果查看statcounter.com并将数字与W3C等来源进行比较,那么可能会对他们如何得到数字持怀疑态度。

如果您想获得真实的统计数据,请访问此网站: browser displayhigh screen resolution