Eva*_*nss 24 breakpoints responsive-design
在哪里可以找到有关移动和桌面屏幕尺寸的统计信息？
我正在制作一个快速响应的网站,特别是我试图找出的是天气,他们是大多数手机和台式机和平板电脑用户之间的大小差距我可以设置一个断点.我认为应该有,但我知道我应该测试我的假设.
所以,为了清楚起见,我希望手机有一套样式,平板电脑和台式机要有另一套.
谢谢
f05*_*055 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- 现在,1366×768 /
不过,在平板电脑上,iPad及其1024x768px是最受欢迎的.
iOS Safari是理智的,并始终报告正确的视口,即.无论你有一个普通的iPad还是Retina iPad,它都会告诉你它是1024x768,类似的iPhone会告诉你它是320x480.
Android浏览器存在更多问题,因为此平台上的屏幕不同.例如,Nexus One的屏幕为480x800px,但在254ppi(像素比率为1.5)时,向CSS报告的视口实际上是360x600.即使是更有趣的Galaxy Nexus也有一个1280x720px的屏幕,316ppi(像素比率2.0,像Retina),报道的视口是360*640.
例外是Android 4.0上的Chrome Beta,在横向模式下它有一个错误,似乎它将该视口宽度报告为Galaxy Nexus上的1280px,这使得很难不与桌面CSS发生冲突.
结论
我个人使用了768px屏幕宽度的断点,即:我将iPad视为桌面版,我认为最小桌面尺寸为1024px.但我也可以假设它是800px,就像过去一样.然后,我专门为iPad肖像处理768px,因为非视网膜iPad有很大的空间,它还不是很小的屏幕.然后,一切都不到768px我称之为小屏智能手机.
为了获得最大的优化,您可以使用640px,600px,480px,360px,320px甚至240px(低端低速机器人)的临时断点,但它可能是一个很好的做法,使它完全基于% - 低于768px,因此它自动适合.
更新:我发现一个有用的断点是810px - Facebook标签中iframe的宽度.在创建FB应用程序并希望重用您的webapp代码时很有帮助.