手机和台式机屏幕尺寸统计 [英] 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-屏幕分辨率现在为1366x768 /
在平板电脑上，1024x768像素的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的屏幕为480x800px，但在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上的视口宽度为1280px，很难与桌面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。但是我也可以假设它是800px，就像过去一样。然后，我将768px专用于iPad人像，因为非视网膜iPad的空间很大，所以屏幕还不是很小。然后，所有小于768像素的东西我都称为小屏幕智能手机。
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的临时断点（低端低端android），但最好将其完全基于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应用程序并想重用Web应用程序代码时很有用。
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屋！
