移动和桌面屏幕尺寸统计 [英] Mobile and desktop screen size statistics
问题描述
在哪里可以找到有关移动和桌面屏幕尺寸的统计信息?
Where can I find statistics on mobile and desktop screen sizes?
我正在制作一个响应式网站，特别是我试图找出的是大多数手机与台式机和平板电脑用户之间的大小差距，我可以在其中设置断点.我认为应该有但知道我应该测试我的假设.
Im making a responsive site and specifically what im trying to find out is weather their is a size gap between the majority of phones and desktop and tablet users where I can put a breakpoint. I think that there should be but know I should test my assumptions.
所以要明确一点，我希望手机有一套样式，平板电脑和台式机有另一套样式.
So just to be clear, I want phones to have one set of styles, and tablets and desktops to have another set.
谢谢
推荐答案
我刚刚完成了一个响应式商业网站 ( https://plus.google.com/101258044853419629282/posts/GejAf734nP6 )我可以告诉你的是——断点绝对不是600px！
I just finished doing a responsive business website ( https://plus.google.com/101258044853419629282/posts/GejAf734nP6 ) and here is what I can tell you - the breakpoint is definitely not 600px!
以下是事实(就 CSS 和 @media 查询而言):
Here are the facts (in terms of CSS and @media queries):
1366px 桌面宽度刚刚超过 1024px 成为最受欢迎的尺寸:http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/
不过，在平板电脑上，1024x768px 的 iPad 最受欢迎.
Still, on tablets, iPad with its 1024x768px is the most popular.
iOS Safari 是健全的并且总是报告正确的视口，即.无论你是普通 iPad 还是 Retina iPad，它都会告诉你它是 1024x768，同样的 iPhone 会告诉你它是 320x480.
iOS Safari is sane and always reports proper viewport, ie. no matter if you have a regular iPad or Retina iPad, it will tell you it's 1024x768, similarly iPhone will tell you it's 320x480.
Android 浏览器存在更多问题，因为该平台的屏幕各不相同.例如，Nexus One 有一个 480x800 像素的屏幕，但在 254ppi(像素比 1.5)时，报告给 CSS 的视口实际上是 360x600.更有趣的 Galaxy Nexus 屏幕为 1280x720px，分辨率为 316ppi(像素比为 2.0，如 Retina)，报告的视口为 360*640.
Android browser has more problems, since screens vary on this platform. For example, Nexus One has a 480x800px screen, but at 254ppi (pixel ratio 1.5) the viewport reported to CSS is actually 360x600. Even funnier Galaxy Nexus has a 1280x720px screen at 316ppi (pixel ratio 2.0, like Retina), reported viewport is 360*640.
Android 4.0 上的 Chrome Beta 例外，在横向模式下它有一个错误，似乎它在 Galaxy Nexus 上报告视口宽度为 1280 像素，因此很难不与桌面 CSS 冲突.
Exception is Chrome Beta on Android 4.0, in landscape mode it has a bug and seems like it reports the viewport width as 1280px on that Galaxy Nexus, making it very difficult to not conflict with desktop CSS.
结论
我个人使用了 768px 屏幕宽度的断点，即:我将横向的 iPad 视为桌面，并且我假设最小桌面大小为 1024px.但我也可以假设它是 800 像素，就像过去一样.然后，我把768px专门用于iPad人像，因为非视网膜iPad有很大的空间，还不是很小的屏幕.然后，凡是小于 768px 的我都称之为小屏智能手机.
I personally used a breakpoint of 768px screen width, namely: I treat iPad in landscape as desktop, and I assume minimum desktop size is 1024px. But I could also assume it's 800px, like in the old days. Then, I treat 768px specifically for iPad portrait, since non-retina iPads have a lot of space, it's not quite small-screen yet. Then, everything less than 768px I call a small-screen smartphone.
为了最大程度的优化，您可以在 640px、600px、480px、360px、320px 甚至 240px(低端低端机器人)处使用临时断点，但在 768px 以下完全基于 % 可能是一个好习惯，因此它适合自动.
For maximum optimisation you could use interim breakpoints at 640px, 600px, 480px, 360px, 320px and even 240px (low-low-end androids) but it's probably a good practice to make it totally %-based below 768px so it fits automatically.
更新:我发现一个有用的断点是 810px - Facebook 标签中 iframe 的宽度.当您创建 FB 应用程序并希望重复使用您的网络应用程序代码时很有帮助.
UPDATE: one useful breakpoint I found is 810px - the width of an iframe in a Facebook tab. Helpful when you create FB apps and want to reuse your webapp code.
这篇关于移动和桌面屏幕尺寸统计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
