Trong HTML của tôi, tôi có một <div> (gọi nó là bảng điều khiển) với chiều rộng cố định có chứa một số văn bản; văn bản đó được đặt thành font-size: 25px; line-height: 25px; trong CSS kèm theo. Điều đó xảy ra khi văn bản kết thúc bằng 36 dòng.Tại sao pixel được hiển thị khác với pixel thực?
Cho rằng tất cả lề, miếng đệm và biên giới là không, bạn mong muốn chiều cao của bảng điều khiển là 36 * 25px = 900px, và đó là trên thực tế những gì tôi tìm thấy trong Firefox, sử dụng phương pháp getBoundingClientRect() của DOM.
Tuy nhiên, trong Google Chrome, tôi nhận được các số liệu khác nhau; nó sẽ xuất hiện bảng điều khiển chỉ cao 892.7999877929688px trong khi dòng là cao 24.799999660915798px. Chia hai số vẫn mang lại 36 mặc dù. Dường như có tỷ lệ chia tỷ lệ giữa các pixel danh nghĩa như được đặt trong CSS và pixel thực như được báo cáo bởi getBoundingClientRect(); trong trường hợp của tôi, đây là 1.0080645299120465 danh nghĩa trên mỗi pixel thực.
Một phần khác của bằng chứng xuất phát từ Chromium đang chạy bên trong ứng dụng nwjs nơi tôi bước đầu quan sát sự khác biệt. Trong các thử nghiệm của tôi, nó cho thấy tỷ lệ khác nhau khác với tỷ lệ trong Chrome. Bây giờ, tại một số thời điểm trong các thử nghiệm của tôi, các pixel được báo cáo bởi Chromium đột nhiên nhảy lên các giá trị số nguyên như được báo cáo trong Firefox; Tôi không chắc chắn những gì tôi đã làm để làm cho điều này xảy ra.
Có thể dự kiến rằng tỷ lệ phân số theo một cách nào đó được liên kết với thu phóng trang; sau cùng, ở kích thước rất nhỏ, Chrome và Chromium sẽ chỉnh lại văn bản (và đôi khi làm sai). Và thực tế, việc thay đổi tỷ lệ thu phóng trong Chrome dẫn đến các tỷ lệ khác nhau và làm cho Chrome phóng to đến mức tối đa sẽ làm cho tỷ lệ căn hộ ở mức 1. Tuy nhiên, ứng dụng Chromium của tôi không được phóng to đến mức tối đa và vẫn có tỷ lệ phân số
.
tỷ lệ pixel nguyên trong thử nghiệm nhưng giá trị phân số trong ứng dụng thực. Đối với tất cả tôi hiện nay biết, tất cả tôi có thể làm để có được tỷ lệ để tôi có thể làm cho âm thanh, kích thước hộp phù hợp đo với JavaScript là để thiết lập một hộp có kích thước được biết đến và đo lường nó.
Tôi vẫn tự hỏi nguồn gốc của hành vi được quan sát là gì. Có báo cáo nào không? Nó có phải là một hành vi cố ý hoặc nổi lên của trình kết xuất đồ họa không? Nó có từng được các nhà phát triển thảo luận không? Có một API để có được tỷ lệ?
Tôi đã đặt một số mã trên một ý chính tại https://gist.github.com/loveencounterflow/d8c20b9021d2ab3f573a để đơn giản hóa việc thử nghiệm.
thú vị, vì khi nào px có giá trị dấu phẩy? –
@ DomlThe-Bread từ đầu thời gian trong JavaScript/CSS/HTML http://en.wikipedia.org/wiki/Pixel#Subpixels –
chủ đề thú vị, thú vị ở đó! sẽ đọc qua đó! –