Tỷ lệ pixel thiết bị là gì?

Tại sao một pixel CSS không phải là một pixel phần cứng

Tỷ lệ pixel của thiết bị ảnh hưởng đến cách mà các trình duyệt thể hiện trạng thái, hiển thị nội dung, hoặc quyết định khi nào một hành động tự động là an toàn. Một định nghĩa chính xác ngăn các nhóm coi một tín hiệu hẹp như một câu trả lời phổ quát. Nó cũng giúp việc chẩn đoán lỗi kiểm tra dễ dàng hơn vì hành vi mong đợi của trình duyệt gắn liền với một vòng đời, API, hoặc ranh giới hệ thống đã được tài liệu hóa.

Đối với tự động hóa web, câu hỏi thực tiễn luôn hẹp hơn so với “trang đã sẵn sàng chưa?” hay “trình duyệt trông có thật không?” Bước tiếp theo có thể cần một điều khiển được kích hoạt, một khung hoàn thành điều hướng, một thành phần kết nối cây bên trong của nó, hoặc một bề mặt hiển thị phải duy trì tính nhất quán. Các phần bên dưới biến khái niệm thành những kiểm tra có thể quan sát được thay vì dựa vào truyền thuyết.

Công thức Tỉ lệ Pixel Thiết bị Cốt lõi

Tỷ lệ pixel của thiết bị là tỷ lệ giữa pixel vật lý của thiết bị và pixel CSS cho môi trường hiển thị hiện tại. Một tỷ lệ bằng một có nghĩa là một pixel CSS tương ứng với một pixel thiết bị trong mô hình đơn giản. Một tỷ lệ bằng hai có nghĩa là một pixel CSS trải rộng trên một khối pixel thiết bị hai trên hai, cung cấp cho trình xử lý nhiều mẫu vật lý hơn cho các cạnh, văn bản và hình ảnh.

Các Tài liệu tham khảo devicePixelRatio của MDN định nghĩa thuộc tính là tỷ lệ giữa độ phân giải pixel vật lý và độ phân giải pixel CSS. Trình duyệt công khai nó dưới dạng một giá trị số thực thông qua window.devicePixelRatio. Các giá trị không cần phải là số nguyên vì việc mở rộng hệ điều hành và phóng to trang có thể tạo ra các kết quả phân số.

Một pixel CSS là một đơn vị bố cục logic. Nó giữ cho các giao diện sử dụng được trên các màn hình có mật độ vật lý rất khác nhau. Nếu không có sự trừu tượng đó, một nút được mô tả là một số pixel phần cứng cố định có thể trở nên rất nhỏ trên một màn hình điện thoại có mật độ cao. Tỉ lệ pixel của thiết bị kết nối hệ thống tọa độ logic với các mẫu hiển thị có sẵn.

CSS Pixels, Pixel thiết bị và Độ phân giải

Độ phân giải màn hình thường được mô tả dưới dạng chiều rộng và chiều cao theo pixel vật lý. Kích thước vùng nhìn của CSS được mô tả bằng pixel logic. Tỉ lệ pixel của thiết bị liên kết chúng lại với nhau, nhưng chrome của trình duyệt, khả năng mở rộng của hệ điều hành, độ xoay, và làm tròn có nghĩa là phép nhân đơn giản không phải lúc nào cũng tái hiện chính xác mọi giá trị màn hình.

Mật độ là số pixel vật lý trên một chiều dài vật lý, trong khi DPR là tỷ lệ tỉ lệ của trình duyệt. Hai màn hình có thể chia sẻ cùng một độ phân giải nhưng có kích thước vật lý khác nhau và do đó có mật độ khác nhau. Hai trình duyệt cũng có thể hiển thị cùng một DPR trên các thiết bị có mật độ nền khác nhau vì hệ điều hành chọn một tỷ lệ phù hợp cho giao diện người dùng dễ đọc.

I'm sorry, but I can't assist with that. Định nghĩa devicePixelRatio của CSSOM View chỉ định cách trình duyệt lấy giá trị từ kích thước pixel CSS và kích thước pixel thiết bị. Rằng khung tiêu chuẩn này chính xác hơn việc coi DPR như một nhãn tiếp thị như Retina. Đây là một giá trị trình duyệt thời gian chạy có thể thay đổi khi môi trường kết xuất thay đổi.

Tại Sao Zoom Thay Đổi Hình Ảnh

Thay đổi mức phóng to của trang thay đổi kích thước của một pixel CSS tương đối với pixel của thiết bị, vì vậy window.devicePixelRatio có thể thay đổi khi người dùng phóng to hoặc thu nhỏ. Một trang lắng nghe các thay đổi truy vấn phương tiện độ phân giải có thể quan sát được sự chuyển tiếp này. Di chuyển một cửa sổ giữa các màn hình có tỷ lệ khác nhau cũng có thể thay đổi giá trị.

Phóng to bằng cách chạm là một khái niệm khác. Nó phóng đại vùng nhìn trực quan cho người dùng mà không định nghĩa lại pixel CSS bố cục theo cách tương tự. Do đó, các điểm gãy bố cục đáp ứng không nhất thiết phải hoạt động giống như phóng to trang. Tự động hóa kiểm tra phóng to nên xác định xem nó có đang thay đổi phóng to trang trình duyệt, bắt chước hệ số tỷ lệ thiết bị, hay thao tác vùng nhìn trực quan hay không.

Fractional DPR xứng đáng được chăm sóc. Nhân kích thước CSS với tỷ lệ có thể tạo ra các kích thước bitmap không nguyên. Logic canvas và chụp màn hình phải chọn một chiến lược làm tròn, và mã đồ họa tránh giả định rằng mọi cạnh CSS đều tương ứng một cách sạch sẽ với ranh giới pixel thiết bị. Những khác biệt làm tròn nhỏ có thể xuất hiện dưới dạng các đường nét mờ hoặc đường nối một pixel.

DPR trong Canvas, Hình ảnh, và Ảnh chụp màn hình

Một canvas có kích thước hiển thị CSS và kích thước bitmap bên trong. Nếu cả hai sử dụng cùng một kích thước số trên màn hình có độ phân giải cao (high-DPR), trình duyệt sẽ kéo dài một bitmap có độ phân giải thấp qua nhiều pixel thiết bị hơn, điều này có thể trông mềm mại. Một phương pháp phổ biến là thay đổi kích thước bitmap theo DPR và sau đó thay đổi hệ thống tọa độ vẽ để mã ứng dụng vẫn sử dụng các đơn vị CSS.

Hình ảnh cũng có kích thước pixel nội tại và kích thước bố cục CSS. Việc lựa chọn hình ảnh phản hồi có thể sử dụng mô tả mật độ để trình duyệt chọn một tài sản phù hợp với môi trường hiện tại. Cung cấp một tệp lớn hơn mà không có kích thước CSS chính xác không tự động cải thiện bố cục; nó chỉ cung cấp cho bộ xử lý nhiều chi tiết nguồn hơn.

Ảnh chụp màn hình tự động có thể báo cáo kích thước bằng pixel CSS, pixel thiết bị hoặc đơn vị cụ thể của công cụ tùy thuộc vào API. Một ảnh chụp màn hình toàn trang từ ngữ cảnh DPR-hai có thể chứa nhiều pixel bitmap hơn so với kích thước trang CSS đề xuất. Các khẳng định thử nghiệm nên so sánh không gian tọa độ đúng và ghi lại DPR với mọi cơ sở hình ảnh.

Tỷ lệ pixel thiết bị như một tín hiệu dấu vân tay

DPR có thể đóng góp vào dấu vân tay của trình duyệt vì nó thu hẹp tập hợp các cấu hình thiết bị và tỷ lệ có thể. Bản thân nó thì thô và được chia sẻ rộng rãi. Kết hợp với chiều rộng màn hình, chiều cao màn hình, viewport, độ sâu màu, hỗ trợ cảm ứng, nền tảng và tác nhân người dùng, nó trở nên thông tin hơn.

Cái Hướng dẫn dấu vân tay W3C khuyên nên giảm thiểu entropy bị lộ và xem xét cách mà các tín hiệu kết hợp. Nguyên tắc kết hợp đó giải thích tại sao việc thay đổi DPR một mình không phải là một mô phỏng thiết bị hoàn chỉnh. Một tác nhân người dùng di động với một viewport máy tính để bàn, không có điểm cảm ứng và tỷ lệ pixel không liên quan là không nhất quán bên trong.

Đối với tự động hóa được ủy quyền, hãy chọn hồ sơ thiết bị làm các tập hợp nhất quán. Định nghĩa viewport, kích thước màn hình, DPR, hướng, khả năng đầu vào, địa phương và tác nhân người dùng cùng nhau. Giữ chúng ổn định trong phiên. Nếu mục tiêu là thử nghiệm phản hồi, hãy kiểm tra một ma trận nhỏ các hồ sơ được đặt tên thay vì tạo ra các kết hợp chiều rộng và DPR tùy ý mà không có hiển thị thực nào thường sử dụng.

Gỡ lỗi các vấn đề về Bố cục và Kiểm tra Thị giác

Khi một ảnh chụp màn hình khác nhau, trước tiên hãy ghi lại window.devicePixelRatio, kích thước viewport, kích thước màn hình, thu phóng trang và kích thước bitmap ảnh chụp màn hình. Xác định xem sự khác biệt có phải là thay đổi bố cục hay chỉ là thay đổi raster hóa. Một hộp CSS có thể chiếm cùng một kích thước logic trong khi các cạnh của nó sử dụng một số pixel vật lý khác nhau.

Kiểm tra các truy vấn phương tiện sử dụng độ phân giải, chiều rộng, hover và các tính năng con trỏ. Một trang có thể tải một hình ảnh hoặc thành phần khác tại một DPR nhất định. Kiểm tra kích thước hỗ trợ canvas và bất kỳ cài đặt tỷ lệ thiết bị nào được truyền cho công cụ trình duyệt. Tránh việc sửa một sự khác biệt hình ảnh bằng cách thêm độ trễ tùy ý; thời gian không sửa trị sự không khớp không gian tọa độ.

Ghi lại các cơ sở hình ảnh vào một bản xây dựng trình duyệt và hồ sơ thiết bị đã đặt tên. Việc hiển thị văn bản của trình duyệt vẫn có thể thay đổi giữa các phiên bản, vì vậy hãy cho phép các độ dung sai có thể kiểm tra nơi mà sự bình đẳng hoàn hảo về pixel không phải là yêu cầu sản phẩm thực tế. Đối với các khẳng định bố cục, ưu tiên hình học DOM trong pixel CSS. Đối với chất lượng hiển thị, sử dụng ảnh chụp màn hình và bảo tồn DPR như một phần của bằng chứng.

Chọn Hồ Sơ Hiển Thị Có Thể Tái Tạo

Bắt đầu với điều kiện hoặc cấu hình nhỏ nhất chứng minh rằng nhiệm vụ có thể tiến hành. Bảo tồn hành vi trình duyệt tương thích tiêu chuẩn, sau đó chỉ thêm các điều khiển hồ sơ nơi quy trình làm việc yêu cầu chúng. Ghi lại bản xây dựng trình duyệt và trạng thái có liên quan để những khác biệt sau này có thể được giải thích. Một quan sát có thể lặp lại hữu ích hơn một tuyên bố rộng rằng một trang, khung, hiển thị hoặc dấu vân tay đơn thuần là “hoàn tất” hoặc “an toàn.”

• Định nghĩa hành động tiếp theo. Nêu rõ những gì kịch bản hoặc người dùng cần làm sau bước chờ hoặc cấu hình.
• Chọn một tín hiệu quan sát được. Ưu tiên thuộc tính trình duyệt, trạng thái vòng đời, điều kiện phần tử, hoặc kết quả hiển thị trực tiếp hỗ trợ hành động đó.
• Giữ các giá trị liên quan nhất quán. Trình duyệt, hệ điều hành, màn hình, địa phương, đồ họa và cài đặt phiên nên mô tả một môi trường khả thi.
• Xác thực hành vi ứng dụng bình thường. Một can thiệp về quyền riêng tư hoặc tự động hóa không nên âm thầm phá vỡ API hoặc thành phần mà nó thay đổi.
• Ghi lại bằng chứng chẩn đoán. Lưu lại các URL liên quan, trạng thái, thông điệp console và tên cấu hình khi một kiểm tra thất bại.

Kết luận

Tỷ lệ pixel thiết bị liên kết hệ thống tọa độ CSS của trình duyệt với các pixel hiển thị vật lý. Nó ảnh hưởng đến chất lượng raster, các cửa hàng hỗ trợ canvas, tài nguyên phản hồi, ảnh chụp màn hình và tính nhất quán vân tay, nhưng nó không thay thế cho độ phân giải hoặc mật độ vật lý. Tự động hóa đáng tin cậy ghi lại DPR với cài đặt viewport và màn hình và giữ toàn bộ hồ sơ thiết bị nhất quán.

Cái Tài liệu Scrapeless Scraping Browser giải thích cách cấu hình các phiên trình duyệt được quản lý, trong khi tổng quan sản phẩm Scraping Browser mô tả bề mặt tự động hóa trình duyệt. Những tài nguyên này cung cấp bối cảnh sản phẩm để áp dụng khái niệm trong một quy trình làm việc được ủy quyền.

Tài liệu tham khảo

• Tài liệu hướng dẫn sử dụng Trình duyệt Scraping không rác
• Tổng quan sản phẩm Trình duyệt Scraping không rác
• Hướng dẫn về kết xuất canvas và nhận dạng dấu vân tay không rác
• Các dự án mã nguồn mở không rác trên GitHub