Chiều rộng tiêu chuẩn cho một trang web tính bằng pixel hoặc thống kê ở đâu?
Câu trả lời:
Không có tiêu chuẩn, mặc dù hầu hết các nhà phát triển đều coi 1024x768 là tiêu chuẩn.
Có một hệ thống lưới CSS có tên là 960grid, giả sử chiều rộng cơ thể là 960px, sau đó phá vỡ các cột trong 96 cột với 10px hoặc 80 với 12px.
Vấn đề là: màn hình PC ngày càng lớn hơn, chậm hơn ở một số vùng nhưng.
Mặt khác, ở đỉnh cao công nghệ, bạn có màn hình nhỏ hơn trong các thiết bị di động và netbook.
Đối phó với sự thật này có thể gây đau đớn. Có CSS Media Queries để giải cứu. Ngoài ra, bạn có thể sử dụng liên kết thẻ (với thiết bị cầm tay rel) để cung cấp phiên bản thay thế cho thiết bị di động.
Thực hiện theo một số liên kết tham khảo cho bạn
Chiều rộng tiêu chuẩn cho một trang web bằng pixel là gì?
Bất kỳ số nào lớn hơn 0 và nhỏ hơn vô hạn.
Các thực tiễn tốt nhất hiện nay cho Thiết kế Web đáp ứng (RWD) là hỗ trợ mọi thiết bị bất kể chiều rộng tính bằng pixel. Thông thường, điều này liên quan đến việc sử dụng các truy vấn phương tiện để cung cấp các kiểu khác nhau cho các phạm vi kích thước màn hình khác nhau. Phạm vi thực tế được sử dụng ít hơn so với thiết kế phù hợp giữa các kích thước và trang web duy trì chức năng theo các kích thước.
Người dùng rất có thể nhìn thấy các kích thước màn hình khác nhau mà không cần suy nghĩ nhiều về nó, vì vậy bạn muốn giảm thiểu mức độ bất ngờ khi họ kéo một cửa sổ để neo trên một nửa màn hình của họ, hoặc tình cờ nghiêng điện thoại của họ.
Một số phạm vi chiều rộng phổ biến được sử dụng là:
Các phạm vi này phổ biến đến mức tôi thực sự nói rằng chúng thực sự là một tiêu chuẩn. Không phải tất cả các phạm vi cần được sử dụng, ví dụ: một trang web có thể có chiều rộng chất lỏng cho mọi thứ dưới 768 và sau đó cố định chiều rộng và tập trung cho 768+.
Với tất cả những gì đã nói, hãy lưu ý rằng các số bạn sử dụng không đặc biệt quan trọng miễn là trang web hoạt động trên bất kỳ thiết bị nào mà người dùng chọn để xem.
thống kê ở đâu?
Bây giờ đến phần khó khăn, dữ liệu thực tế. Nếu bạn đang thiết kế lại một trang web, dữ liệu duy nhất quan trọng là của riêng bạn. Có gì Wikipedia hay Stack Overflow, hoặc Google, hoặc bất kỳ-khác-lớn-website-mà-sức-list-phân tích dữ liệu nói là không liên quan đến bạn dữ liệu cho bạn trang web.
Nếu số liệu thống kê của bạn cho thấy hầu hết người dùng chủ yếu sử dụng một phạm vi chiều rộng thiết bị cụ thể, có lẽ bạn nên tập trung vào việc phục vụ những người dùng đó trước. Như đã nói, nếu thiết kế của bạn phản hồi đúng cách, bạn sẽ không cần phải tập trung vào bất kỳ kích thước cụ thể nào cả.
Đối với các trang web hoặc trang web mới trước đây không có phân tích, hãy cân nhắc kỹ lưỡng khi sử dụng phương pháp tiếp cận trên thiết bị di động và chắc chắn sử dụng phân tích để bạn có thể thích nghi chính xác với cơ sở người dùng của mình.
Tôi ngạc nhiên khi không ai nghĩ đến việc đề cập đến kích thước trình duyệt của google .
Đối với các tiêu chuẩn:
80% người xem có thể xử lý chiều rộng lên tới 1000px, nhưng những người có thể xử lý chiều rộng hơn 1000px thường thì không. Với màn hình rộng, nhiều người sẽ căn chỉnh cửa sổ của họ thành một nửa màn hình. Bây giờ Win7 hỗ trợ drag-n-dock, có khả năng nó sẽ trở nên phổ biến hơn nữa.
Về chiều cao: ấn tượng đầu tiên của bạn đối với người dùng nằm ở đầu trang lên tới khoảng ~ 600px. Tuy nhiên, hầu hết người dùng đều biết và hy vọng nội dung sẽ giảm "dưới màn hình đầu tiên" và sẵn sàng và có thể cuộn.
Nếu bạn muốn đi rộng hơn 1000px, tôi khuyên bạn nên bố trí linh hoạt để người dùng trên netbook và màn hình nhỏ hơn vẫn có thể xem nội dung chính xác.
~ 960px có xu hướng là chiều rộng được tiêu chuẩn hóa, nhưng thực sự nó phụ thuộc vào nội dung và kiểu dáng.
Tôi đã thực hiện một thử nghiệm nhỏ vào năm ngoái bằng Google Analytics để tìm hiểu chiều rộng và chiều cao của trình duyệt bên trong trung bình (những gì người dùng thực sự nhìn thấy).
Như những người khác đã nói, không có tiêu chuẩn cho loại điều này. Mặc dù, đây là một vài mẹo sẽ làm hoặc phanh trang web của bạn:
Tôi đã luôn sử dụng tỷ lệ phần trăm hoặc trường hợp xấu nhất: độ phân giải màn hình nhỏ nhất mà bạn thường gặp là 800x600, và thậm chí điều đó rất hiếm. Bất cứ điều gì dưới đây có lẽ là trên một thiết bị di động. Chiều rộng 775px là một phương tiện tốt để sử dụng, hoặc đơn giản là 80% nếu bạn biết thực tế trang web của bạn sẽ vẫn có sức hấp dẫn khi được thu nhỏ ra màn hình lớn hơn. Các vấn đề phổ biến nhất là nội dung văn bản (Khi được thu nhỏ thành chiều rộng 1600px) có vẻ trống và ngắn. Có trang web của bạn có chiều rộng 775px sẽ khắc phục điều đó, tuy nhiên nó có thể trông không đẹp với không gian mở lớn ở hai bên.
KHÔNG BAO GIỜ làm cho người dùng của bạn cuộn sang trái hoặc phải. Cắt bỏ nội dung của các bên là cách nhanh nhất để mất khách hàng hoặc độc giả tiềm năng.
Có điều hướng của bạn ở đâu đó gần đầu hoặc ở một nơi mà người dùng không cần phải cuộn để tìm thấy nó.
Và chỉ là một mẹo nội dung; hoặc có đồ họa cao / thông tin thấp hoặc thông tin cao / đồ họa thấp. Cố gắng kết hợp cả hai luôn trông khủng khiếp.
Tiêu chuẩn sẽ là "càng rộng / cao càng tốt". Nó phụ thuộc vào màn hình người dùng:
Thật hữu ích khi biết độ phân giải màn hình phổ biến như thế nào và sau đó dựa trên mẫu của bạn dựa trên phần lớn sử dụng chung ... Cá nhân tôi khuyên bạn nên sử dụng Thiết kế đáp ứng - theo cách đó trang web của bạn hoạt động cho tất cả các thiết bị và mọi độ phân giải.
Kể từ tháng 1 năm 2013.
1366x768 25,4%
1920x1080 11,0%
1280x1024 9,7%
1440x900 7,3%
1280x800 8.2%
1680x1050 5,7%
1600x900 5,0%
1920x1200 2,9%
1360x768 2,1%
2560x1440 1,1%
Khác 11,6%
Google Analytics ghi lại độ phân giải màn hình của khách truy cập. Bạn có thể dễ dàng tạo một báo cáo tùy chỉnh để kiểm tra kích thước màn hình phổ biến của khách truy cập là gì. Dưới đây là số liệu thống kê (top 15) cho trang web của tôi cho tháng 5 năm 2013:
Rank Resolution % of Visits
---- ---------- -----------
1 1366x768 23.0%
2 1920x1080 17.7%
3 1440x900 8.4%
4 1280x1024 8.4%
5 1680x1050 7.1%
6 1280x800 6.9%
7 1600x900 6.0%
8 1920x1200 4.7%
9 1024x768 4.4%
10 2560x1440 2.3%
11 1360x768 2.1%
12 1280x768 1.0%
13 1600x1200 0.7%
14 1280x720 0.7%
15 1152x864 0.5%
Các số liệu thống kê khác nhau tùy theo từng trang web tùy thuộc vào loại lưu lượng truy cập mà nó nhận được để thiết kế phù hợp. Bản thân tôi thích các thiết kế chất lỏng với chiều rộng phần trăm, 1000px min-widthvà hợp lý max-width.
Thực sự không có thứ gọi là tiêu chuẩn và số liệu thống kê hoàn toàn phụ thuộc vào nhân khẩu học mục tiêu. Nhắm vào người kỹ thuật nói chung sẽ dẫn đến phần cứng tốt hơn và độ phân giải cao hơn, ít kỹ thuật ngược lại. Nhưng sau đó, có điện thoại, netbook, vv có độ phân giải thấp hơn đáng kể so với tiêu chuẩn trong hầu hết các trường hợp.
Để tham khảo tôi thường giả sử tối thiểu 1024x768 bây giờ.
Trong mọi trường hợp, đây là một số: http://www.w3schools.com/browsers/browsftimesdisplay.asp http : //www.w3corer.com/globalstats.php
960 pixel là an toàn nhất, vì nó hoạt động trên màn hình 1024x768 và chừa chỗ cho thanh cuộn và cũng hoạt động trên iPhone ở chế độ ngang (vì pixel này tăng gấp đôi màn hình 480x320 của nó thành 960x640 hiệu quả và không có thanh cuộn).
Do hầu hết các màn hình màn hình rộng ngày nay có độ phân giải "1440x900" hoặc rộng hơn, tôi sẽ nghĩ rằng độ rộng 1280 pixel đang trở thành "tiêu chuẩn" hơn, đặc biệt là khi hiển thị hình ảnh.
LƯU Ý: Rộng 1280 pixel là chiều rộng của nhiều màn hình 17 inch và 19 inch tỷ lệ 4: 3 cũ hơn.