Thống kê kích thước màn hình điện thoại di động và máy tính để bàn

Question

Tôi có thể tìm số liệu thống kê về kích thước màn hình thiết bị di động và máy tính để bàn ở đâu?

Im tạo trang web đáp ứng và cụ thể những gì tôi đang cố gắng tìm hiểu là thời tiết của họ là khoảng cách kích thước giữa phần lớn điện thoại và người dùng máy tính để bàn và máy tính bảng nơi tôi có thể đặt điểm ngắt. Tôi nghĩ rằng nên có nhưng biết tôi nên kiểm tra các giả định của tôi.

Vì vậy, chỉ cần rõ ràng, tôi muốn điện thoại có một bộ kiểu và máy tính bảng và máy tính để bàn để có bộ khác.

Cảm ơn

Answer 1

Tôi vừa hoàn thành làm một trang web kinh doanh đáp ứng (https://plus.google.com/101258044853419629282/posts/GejAf734nP6) và đây là những gì tôi có thể nói với bạn - breakpoint chắc chắn không phải là 600px!

Dưới đây là các sự kiện (về CSS và @media truy vấn):

1. 1366px chiều rộng máy tính để bàn chỉ vượt 1024px như kích thước phổ biến nhất: http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/

2. Tuy nhiên, trên máy tính bảng, iPad với 1024x768px là phổ biến nhất.

3. iOS Safari lành mạnh và luôn báo cáo chế độ xem phù hợp, tức là. không có vấn đề nếu bạn có iPad hoặc iPad Retina thông thường, nó sẽ cho bạn biết nó là 1024x768, tương tự iPhone sẽ cho bạn biết nó là 320x480.

4. Trình duyệt Android có nhiều sự cố hơn vì màn hình khác nhau trên nền tảng này. Ví dụ: Nexus One có màn hình 480x800px nhưng ở mức 254ppi (tỷ lệ pixel 1,5), chế độ xem được báo cáo với CSS thực sự là 360x600. Ngay cả Galaxy Nexus thú vị hơn cũng có màn hình 1280x720px ở mức 316ppi (tỷ lệ pixel 2.0, như Retina), chế độ xem được báo cáo là 360 * 640.

Ngoại lệ là Chrome Beta trên Android 4.0, ở chế độ ngang có lỗi và có vẻ như báo cáo chiều rộng khung nhìn là 1280px trên Galaxy Nexus, khiến rất khó không xung đột với CSS trên máy tính để bàn.

Kết luận

Cá nhân tôi sử dụng một breakpoint của 768px chiều rộng màn hình, cụ thể là: Tôi đối xử với iPad trong cảnh quan như máy tính để bàn, và tôi cho rằng kích cỡ màn hình tối thiểu là 1024px. Nhưng tôi cũng có thể giả định nó là 800px, giống như trong những ngày xưa. Sau đó, tôi xử lý 768px dành riêng cho chân dung iPad, vì iPad không có võng mạc có rất nhiều không gian, nó chưa hoàn toàn nhỏ. Sau đó, mọi thứ dưới 768px tôi gọi là điện thoại thông minh màn hình nhỏ.

Để tối ưu hóa tối đa, bạn có thể sử dụng các điểm ngắt tạm thời ở 640px, 600px, 480px, 360px, 320px và thậm chí 240px (android thấp cấp) nhưng có thể là một thực hành tốt để làm cho nó hoàn toàn% dựa trên 768px để phù hợp tự động.

CẬP NHẬT: một điểm ngắt hữu ích mà tôi tìm thấy là 810px - chiều rộng của khung nội tuyến trong tab Facebook. Hữu ích khi bạn tạo các ứng dụng FB và muốn sử dụng lại mã webapp của bạn.

Answer 2

960 x 800 x 768 x 640 x 480 x 360 là kích thước bạn phải tuân theo để thiết kế web đáp ứng

Answer 3

Đối với số liệu thống kê độ phân giải mới nhất thay đổi phạm vi ngày trong url này: http://gs.statcounter.com/#resolution-na-monthly-200903-201401

Về các dự án tôi đã xây dựng, chúng tôi có điểm truy vấn phương tiện truyền thông trên chiều rộng 1024px vì đây là chiều rộng của iPad 1, 2 & Mọi thứ bên dưới là "Di động" và mọi thứ ở trên là iPad + Máy tính để bàn.

Đây là cách các nhà phát triển @nytimes đang làm việc đó. xem: JavaScript Jabber Podcast 093: http://javascriptjabber.com/093-jsj-the-new-york-times-and-javascript-with-eitan-konigsburg-alastair-coote-and-reed-emmons/ Nơi họ mô tả điều này lúc 10:40.

Đối với một danh sách toàn diện hơn về độ phân giải thiết bị: http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/

Như mọi khi nó phụ thuộc người bạn đang nhắm mục tiêu. Nếu bạn đang xây dựng trang web/ứng dụng cho trẻ em (nhiều người trong số đó sẽ có android cấp thấp), bạn có thể cần phiên bản "siêu di động" với điểm ngắt 320px (chiều rộng).

Answer 4

Nếu nhìn vào số statcounter.com và so sánh các số với các nguồn như W3C thì có thể hoài nghi về cách chúng có các con số.

Nếu bạn muốn có được một số liệu thống kê thực tế, plz ghé thăm trang web này: browser display, high screen resolution