22
我在哪裏可以找到移動和桌面屏幕尺寸統計信息？移動和桌面屏幕尺寸統計
林作出響應的網站，具體是什麼我嘗試找出天氣是他們爲廣大的手機和臺式機和平板電腦用戶，我可以把一個斷點之間的大小差距。我認爲應該有，但知道我應該測試我的假設。
所以僅僅是明確的，我希望手機有一組風格和平板電腦和臺式機有另一套。
感謝
A
回答
40
我剛說完做了響應的企業網站（https://plus.google.com/101258044853419629282/posts/GejAf734nP6），這裏是我可以告訴你 - 斷點絕對不是600px的！
這裏是事實（在CSS的術語和@media查詢）：
1366px桌面寬度剛剛超過1,024像素作爲目前最流行的尺寸：http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/
儘管如此，平板電腦，iPad的其1024x768像素是最受歡迎的。
iOS的Safari是明智而又始終報告正確的視口，即。無論你是否擁有普通的iPad或Retina iPad，它都會告訴你它是1024x768，類似的iPhone會告訴你它是320x480。
Android瀏覽器有更多的問題，因爲屏幕在這個平臺上會有所不同。例如，Nexus One具有480x800像素的屏幕，但在254ppi（像素比率1.5）處報告給CSS的視口實際上是360x600。更有趣的Galaxy Nexus擁有1280x720像素的屏幕，像素比率爲2.0，像Retina），報告的視口是360 * 640。
例外是Chrome測試版在Android 4.0，在橫向模式下它有缺陷，好像它報告的視口寬度1280px上的Galaxy Nexus，使得不與桌面CSS衝突是非常困難的。
結論
我親自使用768px屏幕寬度的斷點，即：我對待的iPad景觀桌面，我假設最小的臺式機尺寸爲1,024像素。但我也可以假設它是800px，就像過去一樣。然後，我專門爲iPad畫像處理768px，因爲非視網膜iPad有很多空間，但它還不是很小屏幕。然後，所有小於768px的東西我稱爲小屏幕智能手機。
爲了最大限度的優化，您可以使用640px，600px，480px，360px，320px甚至240px（低端低端機器人）的臨時斷點，但它可能是一個很好的做法，使其完全基於％的基於768像素，所以它自動適應。
UPDATE：我發現一個有用的斷點是810px - Facebook選項卡中iframe的寬度。當您創建FB應用程序並希望重用您的Web應用程序代碼時很有用。
+1
我沒有在我的問題中說清楚，但是通過手機，我的意思是我只想將手機，平板電腦視爲桌面電腦。看起來平板電腦的最小寬度是768.因此，如果我將「移動」樣式表的寬度設置在768以下，那麼我可以安全地假定沒有平板電腦設備可以使用這些樣式嗎？謝謝 – Evans 2012-04-18 09:08:45
+0
根據維基百科（https://en.wikipedia.org/wiki/Comparison_of_Android_devices#Tablet_computers）判斷，最小的理智片劑確實是768的寬度。我在該列表上看到一些較小的屏幕，但您無法真正將其稱爲平板電腦。因此，如果您將斷點設置爲** max-width：767px **，那麼理智的平板電腦將以橫向和縱向顯示桌面版本。對於寬度爲800px和像素比率爲1.0的平板電腦也是如此。任何更小或更高的像素比例都會顯示移動版本。此外，我不相信市場上有一款智能手機，其像素爲800像素，像素比爲1.0，僅爲1.5或更多 – f055 2012-04-18 13:05:42
+0
感謝您的回答，但最新的智能平板電腦是什麼？ – Evans 2012-04-18 13:11:22
0
2
對於最新分辨率統計更改日期範圍在這個網址： http://gs.statcounter.com/#resolution-na-monthly-200903-201401
在我製作的項目上，我們在1024像素寬度上有媒體查詢斷點，因爲這是iPad 1的寬度，2 &迷你下面的所有內容都是「移動」，上面的所有內容都是iPad +桌面。
這是@nytimes開發人員如何做的。 參見：JavaScript Jabber播客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像素（寬）的中斷點的「超移動」版本。
-1
如果查看statcounter.com並將其與W3C等來源進行比較，那麼可以懷疑他們是如何得到這些數字的。
如果你想獲得一個真正統計，PLZ訪問這個網站： browser display， high screen resolution
+0
w3schools是一個可怕的建議，我不會相信他們擁有的東西。只有偶爾的語法檢查纔有用。 statcounter已經說明了他們如何得到他們的統計數據，而且非常簡單。 http://gs.statcounter.com/faq#methodology – LocalPCGuy 2016-10-22 13:55:41
例如，如果我把一個斷點600px的寬，大概幾乎所有的臺式機和平板電腦將更大，幾乎所有的手機都將要小一些？ – Evans 2012-04-05 15:31:46