Khi thiết kế web, việc nắm bắt thống kê về độ phân giải màn hình là cực kỳ quan trọng để đảm bảo website của bạn hiển thị đẹp mắt và hoạt động tốt trên đa dạng các thiết bị của người dùng. Xu hướng thiết kế web hiện nay là Responsive Web Design, tức là website tự động điều chỉnh giao diện để phù hợp với kích thước màn hình khác nhau, thay vì chỉ tập trung vào một độ phân giải cố định. Biết được các độ phân giải phổ biến nhất sẽ giúp ưu tiên tối ưu hóa và kiểm thử.
Thống kê màn hình của:
- StatCounter: https://gs.statcounter.com/screen-resolution-stats/
- W3Schools: www.w3schools.com/browsers/browsers_display.asp

I. Độ phân giải màn hình Desktop (Máy tính để bàn/Laptop):
Độ phân giải Full HD (1920×1080) vẫn chiếm ưu thế lớn nhất.
- 1920×1080 (Full HD): Chiếm tỷ lệ lớn nhất (thường khoảng 23-25%). Đây là độ phân giải tiêu chuẩn cho hầu hết các màn hình máy tính để bàn và laptop hiện đại.
- 1366×768: Vẫn còn khá phổ biến, đặc biệt trên các laptop giá rẻ hoặc cũ hơn (thường khoảng 10-15%).
- 1536×864: Đang trở nên phổ biến hơn trên các laptop tầm trung (khoảng 10-12%).
- 1440×900: Một độ phân giải phổ biến khác, đặc biệt trên một số laptop và màn hình cũ hơn.
- 1280×720 (HD): Vẫn được sử dụng, nhưng ít phổ biến hơn trên desktop.
- 2560×1440 (2K/QHD): Đang dần tăng lên, đặc biệt với các màn hình lớn hơn và người dùng chuyên nghiệp (khoảng 3-7%).
- 3840×2160 (4K/UHD): Dù đang phát triển mạnh mẽ trên TV và các màn hình cao cấp, tỷ lệ người dùng web ở độ phân giải này vẫn chưa cao bằng Full HD, nhưng đang dần tăng lên.
Tổng quan về xu hướng Desktop:
- Màn hình có độ phân giải cao hơn (2K, 4K) đang dần phổ biến, nhưng Full HD vẫn là “vua”.
- Thiết kế web cần đảm bảo hiển thị tốt trên cả màn hình rộng và màn hình có tỷ lệ cũ hơn.
II. Độ phân giải màn hình Mobile (Điện thoại di động):
Thống kê cho thấy sự đa dạng lớn hơn về độ phân giải trên di động do có rất nhiều mẫu điện thoại khác nhau. Tuy nhiên, các độ phân giải có chiều rộng khoảng 360px đến 430px là phổ biến nhất khi tính đến chiều rộng viewport (không phải độ phân giải vật lý của màn hình, mà là không gian hiển thị thực tế của trình duyệt):
- 360×800: Một trong những độ phân giải phổ biến nhất cho điện thoại Android.
- 390×844 / 393×873 / 430×932: Phổ biến trên các mẫu iPhone mới hơn và các thiết bị Android cao cấp.
- 360×640 / 375×667: Phổ biến trên các mẫu điện thoại cũ hơn (ví dụ: iPhone 6/7/8).
- 414×896: Phổ biến trên một số mẫu iPhone lớn hơn (ví dụ: iPhone XR, XS Max).
Tổng quan về xu hướng Mobile:
- Xu hướng chung là màn hình dài hơn (tỷ lệ khung hình cao hơn, ví dụ 19.5:9 hoặc 20:9) và có “notch” hoặc “punch-hole” cho camera.
- Chiều rộng phổ biến nhất cho thiết kế web di động thường rơi vào khoảng 360px – 414px (khi tính theo CSS pixels/viewport width).
- Ưu tiên Mobile-First Design: Bắt đầu thiết kế cho di động trước, sau đó mở rộng ra các kích thước lớn hơn.
III. Độ phân giải màn hình Tablet (Máy tính bảng):
Máy tính bảng thường có tỷ lệ khung hình gần giống desktop hoặc hơi vuông hơn một chút.
- 768×1024: Rất phổ biến, đặc biệt là các mẫu iPad đời cũ hơn hoặc các tablet có tỷ lệ 4:3.
- 810×1080 / 820×1180: Phổ biến trên các mẫu iPad và tablet hiện đại hơn.
- 1280×800 / 800×1280: Phổ biến trên các tablet Android.
Tổng quan về xu hướng Tablet:
- Thường được sử dụng ở cả chế độ dọc (portrait) và ngang (landscape), nên thiết kế cần linh hoạt.
- Độ phân giải ngang (landscape) thường nằm trong khoảng 768px – 1366px.
Tầm quan trọng trong thiết kế web:
Việc hiểu các thống kê này giúp bạn:
- Xác định các Breakpoints: Các điểm ngắt (breakpoints) trong CSS (sử dụng
@media queries
) là những ngưỡng độ rộng màn hình mà tại đó giao diện website sẽ thay đổi để phù hợp hơn. Dựa vào các thống kê trên, bạn có thể chọn các breakpoints hiệu quả, ví dụ:- Mobile: Dưới 768px (hoặc cụ thể hơn là 320px, 375px, 425px).
- Tablet: Từ 768px đến 1024px.
- Desktop nhỏ: Từ 1024px đến 1280px.
- Desktop lớn: Từ 1280px trở lên.
- Tối ưu hóa hình ảnh và nội dung: Đảm bảo hình ảnh đủ sắc nét trên màn hình độ phân giải cao (Retina/HiDPI) nhưng vẫn được tối ưu hóa về dung lượng để tải nhanh trên mọi thiết bị.
- Kiểm thử đa thiết bị: Sử dụng các công cụ kiểm thử responsive hoặc trình duyệt ảo để đảm bảo website hiển thị chính xác trên các độ phân giải phổ biến nhất.
Kích thước banner phổ biến và thường có hiệu suất cao trên GDN
Theo nhiều nguồn thống kê, có 5 kích thước banner “chiếm ưu thế” và thường có hiệu suất tốt nhất trên GDN gồm 300 x 250, 728 x 90, 160 x 600, 300 x 600, 320 x 50.
-
-
300 x 250 (Medium Rectangle / Hình chữ nhật cỡ trung):
- Hiệu quả: Đây là kích thước phổ biến nhất và được coi là “linh hoạt” nhất. Nó có thể xuất hiện ở nhiều vị trí, bao gồm trong nội dung bài viết, sidebar, và cả trên thiết bị di động. Kích thước này thường có CTR và tỷ lệ chuyển đổi cao vì nó không quá lớn gây khó chịu nhưng đủ không gian để truyền tải thông điệp.
- Tỷ lệ phổ biến: Chiếm khoảng 40% tổng số lượt hiển thị trên GDN.
-
728 x 90 (Leaderboard / Hình chữ nhật dài):
- Hiệu quả: Phổ biến trên desktop, thường nằm ở đầu hoặc cuối trang web, thu hút sự chú ý ngay lập tức. Rất hiệu quả cho việc tăng nhận diện thương hiệu.
- Tỷ lệ phổ biến: Chiếm khoảng 25%.
-
160 x 600 (Wide Skyscraper / Hình chữ nhật đứng rộng):
- Hiệu quả: Thường xuất hiện ở sidebar của website, nổi bật do kích thước chiều dọc. Tốt cho các chiến dịch muốn truyền tải nhiều thông điệp hoặc hiển thị sản phẩm theo chiều dọc.
- Tỷ lệ phổ biến: Khoảng 12%.
-
300 x 600 (Half-Page Ad / Quảng cáo nửa trang):
- Hiệu quả: Kích thước lớn, chiếm một không gian đáng kể trên màn hình, giúp quảng cáo trở nên nổi bật và thu hút nhiều sự chú ý hơn. Thường có CTR cao do dễ nhìn thấy và tương tác. Phù hợp cho các thông điệp chi tiết hoặc hình ảnh lớn.
- Tỷ lệ phổ biến: Đang tăng lên và được đánh giá là một trong những kích thước hiệu quả nhất.
-
320 x 50 (Mobile Leaderboard / Biểu ngữ di động):
- Hiệu quả: Kích thước tiêu chuẩn và cực kỳ quan trọng cho các thiết bị di động, thường xuất hiện ở cuối màn hình hoặc xen kẽ trong nội dung.
- Tỷ lệ phổ biến: Khoảng 12% tổng số lượt hiển thị. (Có cả 320×100 – Large mobile banner, cũng rất hiệu quả trên di động).
-
Các Kích thước Khác cũng Quan trọng:
-
- 336 x 280 (Large Rectangle / Hình chữ nhật lớn): Tương tự 300×250 nhưng lớn hơn một chút, phù hợp cho việc nhúng vào nội dung bài viết.
- 250 x 250 (Square / Hình vuông): Linh hoạt, có thể đặt ở nhiều vị trí.
- 970 x 90 (Large Leaderboard / Hình chữ nhật dài lớn): Lớn hơn Leaderboard tiêu chuẩn, tạo ấn tượng mạnh hơn.
- 970 x 250 (Billboard): Kích thước rất lớn, phù hợp cho các chiến dịch nhận diện thương hiệu mạnh mẽ.
- 468 x 60 (Banner / Biểu ngữ): Một kích thước biểu ngữ ngang cũ hơn nhưng vẫn còn được sử dụng.
Xu hướng hiện tại và khuyến nghị từ Google:
-
-
Responsive Display Ads (Quảng cáo hiển thị thích ứng): Google đang đẩy mạnh định dạng này. Thay vì tải lên từng kích thước banner tĩnh, bạn chỉ cần cung cấp các tài sản (hình ảnh, video, logo, tiêu đề, mô tả) và Google sẽ tự động tạo ra hàng nghìn phiên bản quảng cáo khác nhau, tối ưu hóa để phù hợp với mọi vị trí quảng cáo và độ phân giải màn hình. Đây là cách được khuyến nghị nhất để đảm bảo hiệu quả hiển thị tối đa.
- Yêu cầu tối thiểu: Hình ảnh ngang (tỷ lệ 1.91:1, ví dụ 1200x628px) và hình ảnh vuông (tỷ lệ 1:1, ví dụ 1200x1200px), cùng với các tiêu đề và mô tả.
- Lợi ích: Tiếp cận được nhiều vị trí hơn, tiết kiệm thời gian thiết kế, tối ưu hóa tự động bởi AI của Google.
-
Tập trung vào chất lượng hình ảnh/nội dung: Bất kể kích thước nào, chất lượng thiết kế, thông điệp rõ ràng, và CTA (Call-to-action) hấp dẫn vẫn là yếu tố quyết định hiệu quả.
-
Dung lượng file: Luôn đảm bảo dung lượng file dưới 150KB (đối với ảnh tĩnh JPG/PNG/GIF) để đảm bảo tốc độ tải trang nhanh, không ảnh hưởng đến trải nghiệm người dùng.
-