Xem độ phân giải màn hình, kích thước vùng nhìn và tỷ lệ điểm ảnh của thiết bị bạn
Công cụ đọc trực tiếp từ trình duyệt bốn thông số quan trọng gồm độ phân giải màn hình, kích thước vùng nhìn, tỷ lệ điểm ảnh và số điểm ảnh vật lý tương ứng, cập nhật ngay khi bạn thay đổi kích thước cửa sổ. Kèm theo là tám kích thước thiết bị dựng sẵn để mở thử một địa chỉ và bảng đối chiếu các điểm ngắt phổ biến.
Tính năng nổi bật
- Hiển thị độ phân giải màn hình đọc từ thông tin thiết bị của trình duyệt
- Hiển thị kích thước vùng nhìn thật của cửa sổ, cập nhật ngay khi bạn kéo co giãn
- Hiển thị tỷ lệ điểm ảnh của thiết bị và số điểm ảnh vật lý tính sẵn
- Nút sao chép gộp cả ba thông số vào bộ nhớ tạm để dán vào báo cáo lỗi
- Tám kích thước dựng sẵn từ điện thoại nhỏ tới màn hình 4K
- Ô nhập địa chỉ để mở thử trang của bạn ở kích thước đã chọn
- Bảng đối chiếu điểm ngắt giữa hai khung giao diện phổ biến
- Chạy hoàn toàn trên trình duyệt, không gửi thông tin thiết bị của bạn đi đâu
Vì sao cần biết con số thay vì cảm nhận bằng mắt
Khi một khách hàng báo giao diện bị vỡ, câu trả lời quen thuộc là màn hình tôi vẫn bình thường. Vấn đề nằm ở chỗ hai người đang nói về hai bộ số khác nhau mà không ai biết. Người báo lỗi có thể đang dùng máy tính xách tay đặt tỷ lệ phóng hệ thống 125 phần trăm khiến vùng nhìn thực chỉ còn khoảng 1.536 điểm ảnh dù màn hình ghi 1.920, trong khi người kiểm tra ngồi trước màn hình 2K để tỷ lệ 100 phần trăm. Cùng một trang web, hai trải nghiệm hoàn toàn khác. Có bốn con số cụ thể trong tay biến cuộc trao đổi mơ hồ thành dữ liệu: bạn bảo khách mở trang này, bấm nút sao chép rồi gửi lại chuỗi thông tin, thế là bạn tái hiện đúng tình huống của họ. Ngoài việc gỡ lỗi, các con số này còn cần khi bạn quyết định xuất ảnh ở kích thước nào, chọn điểm ngắt ở đâu, hay giải thích cho khách vì sao bố cục trên máy họ khác với bản thiết kế mà họ đã duyệt.
Lợi ích khi sử dụng
- Có số liệu cụ thể để trao đổi khi báo lỗi giao diện thay vì mô tả cảm tính
- Biết vùng nhìn thật của mình để chọn điểm ngắt sát với người dùng thực
- Biết tỷ lệ điểm ảnh để xuất ảnh đúng độ phân giải, tránh ảnh mờ trên màn hình mật độ cao
- Kiểm tra nhanh một trang ở nhiều bề ngang mà không phải mở công cụ dành cho nhà phát triển
- Không cần cài gì, mở trên đúng thiết bị cần kiểm tra là có số liệu
Cách đọc và dùng các thông số
- 1Mở trang bằng chính thiết bị và trình duyệt bạn muốn kiểm tra, các con số hiện ngay ở khối đầu tiên.
- 2Kéo co giãn cửa sổ trình duyệt và quan sát ô kích thước vùng nhìn thay đổi, đây là con số mà giao diện co giãn thực sự dựa vào.
- 3Bấm Copy thông tin để lấy cả ba dòng thông số, tiện khi cần gửi kèm khi báo lỗi giao diện.
- 4Nhập địa chỉ trang bạn muốn kiểm tra vào ô bên phải, để trống nếu chỉ muốn mở một cửa sổ rỗng để đo.
- 5Bấm một trong tám nút kích thước dựng sẵn để mở cửa sổ mới theo kích thước đó, nhớ cho phép cửa sổ bật lên nếu trình duyệt chặn.
Bốn con số nghĩa là gì và vì sao chúng khác nhau
Độ phân giải màn hình là kích thước toàn màn hình theo đơn vị điểm ảnh mà hệ thống báo cáo cho trình duyệt. Kích thước vùng nhìn là phần thật sự dành cho nội dung trang web, luôn nhỏ hơn vì phải trừ đi thanh địa chỉ, thanh dấu trang, thanh cuộn dọc, thanh tác vụ của hệ điều hành và phần khung cửa sổ. Trên máy tính, chênh lệch giữa hai con số thường vào khoảng 100 tới 200 điểm ảnh chiều cao; trên điện thoại, thanh địa chỉ có thể ẩn hiện khi cuộn khiến chiều cao vùng nhìn thay đổi ngay trong lúc người dùng đang xem, đây là nguyên nhân của khá nhiều lỗi bố cục dùng chiều cao cố định. Tỷ lệ điểm ảnh cho biết mỗi đơn vị điểm ảnh trong mã nguồn tương ứng với bao nhiêu điểm ảnh vật lý trên tấm nền; giá trị 1 là màn hình thường, 2 và 3 là màn hình mật độ cao. Con số điểm ảnh vật lý ở ô cuối chính là tích của độ phân giải với tỷ lệ này, và nó thường khiến người ta bất ngờ: một chiếc điện thoại báo màn hình 393 điểm ảnh nhưng tỷ lệ 3 thì thực chất có tới 1.179 điểm ảnh vật lý theo chiều ngang.
Điểm ảnh trong mã nguồn không phải điểm ảnh trên tấm nền
Đây là khái niệm gây nhầm lẫn nhiều nhất và có hệ quả trực tiếp tới chất lượng hình ảnh trên trang của bạn. Khi màn hình mật độ cao xuất hiện, nếu giữ nguyên cách tính cũ thì mọi chữ và nút bấm sẽ nhỏ đi một nửa và không ai đọc nổi. Giải pháp là tách làm hai lớp: mã nguồn làm việc với đơn vị điểm ảnh quy ước, còn hệ thống nhân lên theo tỷ lệ khi vẽ ra tấm nền. Nhờ vậy một nút cao 44 đơn vị vẫn cao chừng ấy về mặt thị giác trên mọi máy, chỉ khác là trên máy mật độ cao nó được vẽ bằng nhiều điểm ảnh hơn nên viền sắc nét hơn. Hệ quả với ảnh bitmap thì ngược lại: một tấm ảnh rộng đúng 400 điểm ảnh đặt trong khung rộng 400 đơn vị sẽ bị kéo giãn gấp đôi trên màn hình tỷ lệ 2, và trông mờ rõ rệt. Quy tắc thực dụng là xuất ảnh ở kích thước gấp đôi khung hiển thị rồi khai báo cho trình duyệt biết các phiên bản kích thước khác nhau, để máy thường tải bản nhỏ còn máy mật độ cao tải bản lớn. Riêng biểu trưng và biểu tượng thì dùng định dạng vector là xong, vì chúng sắc nét ở mọi tỷ lệ.
Bảng điểm ngắt và cách chọn cho đúng
Bảng đối chiếu trên trang liệt kê năm mốc thường dùng là 640, 768, 1.024, 1.280 và 1.536 điểm ảnh, tương ứng các cấp nhỏ, vừa, lớn, rất lớn của các khung giao diện phổ biến hiện nay. Điều đáng nói là những con số này không phải chân lý và cũng không gắn với thiết bị cụ thể nào. Việc chọn điểm ngắt theo tên thiết bị là cách làm đã lỗi thời, bởi số lượng kích thước màn hình ngoài đời quá nhiều và thay đổi liên tục, chưa kể người dùng máy tính hiếm khi mở cửa sổ chiếm hết màn hình. Cách làm bền vững hơn là chọn điểm ngắt theo nội dung: kéo hẹp cửa sổ dần dần và dừng lại đúng chỗ bố cục bắt đầu trông xấu, đó chính là điểm ngắt bạn cần, dù con số có lẻ như 712 hay 934. Một lưu ý kỹ thuật: điểm ngắt so sánh với bề rộng vùng nhìn chứ không phải bề rộng màn hình, nên hãy nhìn ô kích thước vùng nhìn trong lúc kéo co giãn. Với dự án đã có dữ liệu thống kê truy cập, hãy xem báo cáo kích thước màn hình của người dùng thật và ưu tiên kiểm tra kỹ ở những mốc chiếm tỷ trọng cao nhất thay vì chia đều công sức.
Nút mở cửa sổ theo kích thước hoạt động ra sao và giới hạn của nó
Khi bạn bấm một trong tám nút, trình duyệt được yêu cầu mở một cửa sổ mới với chiều rộng và chiều cao chỉ định. Có ba điều cần biết. Thứ nhất, kích thước bạn đặt là kích thước cửa sổ tính cả khung, thanh địa chỉ và viền, nên vùng nhìn thực bên trong luôn nhỏ hơn con số đó, thường hụt khoảng 70 tới 120 điểm ảnh chiều cao. Muốn biết chính xác, hãy mở lại chính trang này trong cửa sổ vừa tạo và đọc ô kích thước vùng nhìn. Thứ hai, trình chặn cửa sổ bật lên thường ngăn thao tác này ở lần đầu; nếu không thấy gì xảy ra, hãy tìm biểu tượng thông báo ở thanh địa chỉ và chọn cho phép trang này mở cửa sổ. Thứ ba, trên điện thoại và máy tính bảng, hệ điều hành không cho phép cửa sổ có kích thước tùy ý nên trình duyệt sẽ mở một thẻ mới chiếm toàn màn hình và bỏ qua kích thước bạn chọn; đây là hành vi của thiết bị chứ không phải lỗi công cụ. Ngoài ra cửa sổ mới chỉ đổi bề ngang chứ không giả lập cảm ứng, không đổi chuỗi nhận dạng trình duyệt và không đổi tỷ lệ điểm ảnh.
Quy trình kiểm tra giao diện co giãn trong thực tế
Bước đầu tiên và rẻ nhất là kéo co giãn cửa sổ trình duyệt từ rộng nhất về hẹp nhất một cách chậm rãi, mắt nhìn vào bố cục chứ không nhìn vào các mốc số. Cách này phát hiện hầu hết lỗi tràn chữ, ảnh vỡ khung và nút bấm chồng lên nhau. Bước thứ hai là dùng chế độ giả lập thiết bị trong công cụ dành cho nhà phát triển của trình duyệt, nơi bạn đặt được cả tỷ lệ điểm ảnh, giả lập cảm ứng và đổi chuỗi nhận dạng, những thứ mà việc mở cửa sổ đơn thuần không làm được. Bước thứ ba, và không thể bỏ qua với dự án nghiêm túc, là mở trên máy thật. Có những vấn đề chỉ lộ ra trên thiết bị thật: thanh địa chỉ ẩn hiện khi cuộn làm chiều cao vùng nhìn nhảy, bàn phím ảo đẩy bố cục lên, vùng khuyết ở đỉnh màn hình che mất nội dung, hiệu ứng khi rê chuột kẹt lại sau khi chạm, hay đơn giản là chữ nhỏ hơn nhiều so với cảm nhận trên máy tính. Hãy giữ tối thiểu một điện thoại thật và một máy tính bảng thật để kiểm tra trước khi phát hành, và dùng công cụ này để ghi lại thông số của chính những máy đó làm mốc đối chiếu.
Câu hỏi thường gặp (FAQ)
Vì sao kích thước vùng nhìn nhỏ hơn độ phân giải màn hình?
Vì vùng nhìn chỉ tính phần dành cho nội dung trang web, đã trừ đi thanh địa chỉ, thanh dấu trang, thanh cuộn, khung cửa sổ và thanh tác vụ của hệ điều hành. Trên máy tính, chênh lệch thường vào khoảng 100 tới 200 điểm ảnh chiều cao. Giao diện co giãn dựa vào vùng nhìn chứ không phải độ phân giải màn hình.
Tỷ lệ điểm ảnh của thiết bị là gì?
Là số điểm ảnh vật lý dùng để vẽ một đơn vị điểm ảnh trong mã nguồn. Giá trị 1 là màn hình thường, 2 và 3 là màn hình mật độ cao. Nhờ cơ chế này mà chữ và nút bấm giữ nguyên kích thước thị giác trên mọi máy, chỉ khác về độ sắc nét.
Vì sao ảnh của tôi bị mờ trên màn hình mật độ cao?
Vì ảnh đang có số điểm ảnh thật ít hơn số điểm ảnh vật lý mà màn hình dùng để vẽ nó. Hãy xuất ảnh ở kích thước gấp đôi khung hiển thị và khai báo nhiều phiên bản kích thước để trình duyệt tự chọn. Với biểu trưng và biểu tượng, hãy dùng định dạng vector.
Bấm nút kích thước mà không thấy cửa sổ nào mở ra?
Gần như chắc chắn trình chặn cửa sổ bật lên đã ngăn lại. Hãy tìm biểu tượng thông báo ở thanh địa chỉ và chọn cho phép trang này mở cửa sổ, sau đó bấm lại. Trên điện thoại thì trình duyệt luôn mở thẻ mới chiếm toàn màn hình và bỏ qua kích thước bạn chọn.
Cửa sổ mở ra có đúng kích thước tôi chọn không?
Kích thước bạn chọn áp cho cả cửa sổ tính luôn khung và thanh địa chỉ, nên vùng nhìn bên trong nhỏ hơn, thường hụt khoảng 70 tới 120 điểm ảnh chiều cao. Muốn biết con số thật, hãy mở lại chính trang này trong cửa sổ vừa tạo và đọc ô kích thước vùng nhìn.
Nên chọn điểm ngắt theo thiết bị hay theo nội dung?
Theo nội dung. Chọn theo tên thiết bị đã lỗi thời vì kích thước màn hình ngoài đời quá đa dạng và người dùng máy tính hiếm khi mở cửa sổ chiếm hết màn hình. Hãy kéo hẹp cửa sổ dần và đặt điểm ngắt đúng chỗ bố cục bắt đầu trông xấu, dù con số có lẻ.
Vì sao màn hình tôi ghi 1.920 nhưng vùng nhìn chỉ khoảng 1.536?
Vì hệ điều hành đang đặt tỷ lệ phóng ở mức 125 phần trăm, một thiết lập mặc định khá phổ biến trên máy tính xách tay. Khi đó mọi thứ được phóng to lên và vùng nhìn theo đơn vị điểm ảnh quy ước co lại tương ứng. Đây chính là lý do nhiều người dùng máy tính thực chất đang xem trang ở bề ngang hẹp hơn bạn tưởng.
Chiều cao vùng nhìn trên điện thoại thay đổi liên tục, có bình thường không?
Bình thường. Thanh địa chỉ của trình duyệt di động tự ẩn khi cuộn xuống và hiện lại khi cuộn lên, khiến chiều cao khả dụng nhảy vài chục điểm ảnh. Đây là nguyên nhân của nhiều lỗi bố cục dùng chiều cao cố định theo phần trăm màn hình, nên hãy cân nhắc kỹ khi dùng đơn vị đó.
Công cụ này thay được chế độ giả lập thiết bị của trình duyệt không?
Không thay được hoàn toàn. Nó cho bạn số liệu thật của máy đang dùng và cách xem nhanh ở nhiều bề ngang, nhưng không giả lập được cảm ứng, không đổi tỷ lệ điểm ảnh và không đổi chuỗi nhận dạng trình duyệt. Ba việc đó cần chế độ giả lập trong công cụ dành cho nhà phát triển.
Thông tin thiết bị của tôi có bị gửi đi đâu không?
Không. Mọi con số đều đọc từ trình duyệt bằng JavaScript và hiển thị tại chỗ, không có yêu cầu mạng nào gửi ra ngoài. Nút sao chép chỉ đưa chuỗi thông tin vào bộ nhớ tạm của máy bạn để bạn chủ động dán vào nơi mình muốn.
Tám kích thước dựng sẵn lấy theo tiêu chí nào?
Chúng phủ các vùng đại diện gồm điện thoại nhỏ, điện thoại phổ thông, máy tính bảng dựng đứng, máy tính bảng lớn, máy tính xách tay, màn hình phổ thông, màn hình 2K và màn hình 4K. Mục đích là kiểm tra nhanh ở các vùng khác nhau chứ không phải mô phỏng chính xác từng dòng máy.
Có cần thử trên máy thật khi đã kiểm tra bằng công cụ không?
Có. Nhiều vấn đề chỉ lộ ra trên thiết bị thật như bàn phím ảo đẩy bố cục, vùng khuyết ở đỉnh màn hình che nội dung, hiệu ứng khi rê chuột kẹt lại sau khi chạm, hay chữ nhỏ hơn nhiều so với cảm nhận trên máy tính. Hãy giữ ít nhất một điện thoại thật để kiểm tra trước khi phát hành.
Từ khóa liên quan
- kiểm tra độ phân giải màn hình
- xem kích thước viewport
- device pixel ratio là gì
- test giao diện responsive
- điểm ngắt responsive phổ biến
- breakpoint tailwind bootstrap
- màn hình bao nhiêu pixel
- kiểm tra màn hình retina
- ảnh bị mờ trên màn hình retina
- kích thước màn hình iphone ipad
- viewport nhỏ hơn màn hình
- tỷ lệ phóng 125 phần trăm windows
- kiểm tra web trên nhiều kích thước
- mở cửa sổ theo kích thước cố định
- công cụ cho lập trình viên frontend
- test website trên điện thoại
- screen resolution checker online
- thông số màn hình của tôi
- kiểm tra bố cục bị vỡ
- chọn breakpoint theo nội dung
