Cách truy cập cài đặt DPI của màn hình hiển thị thông qua javascript?

Question

Có cách nào để truy cập cài đặt DPI của màn hình hiển thị trong chức năng Javascript không?

Tôi đang cố gắng định vị bảng điều khiển HTML trên trang và khi DPI của người dùng được đặt thành lớn (120), nó sẽ tắt vị trí. Tôi cần phải biết DPI là gì để tôi có thể điều chỉnh vị trí cho phù hợp.

Answer 1

Thứ nhất, để giúp đỡ với sự nhầm lẫn có thể (và rất phổ biến) với thời hạn DPI (dots per inch):

DPI không chính xác là một phần của "cài đặt hiển thị". Chữ này (sai) được sử dụng trong hai ngữ cảnh khác nhau:

1. Pixel gốc trên inch của màn hình (hoặc video). Nó xác định các pixel nhỏ như thế nào. Bạn có thể có cùng độ phân giải 1024x768 trên cả màn hình laptop 14 "và màn hình LCD 17". Trước đây khoảng 1280/14 = 91 DPI và sau đó sẽ là 1280/17 = 75 DPI. DPI của màn hình là bất biến; không thể thay đổi cài đặt hiển thị. More...
2. Các chấm trên mỗi inch được vẽ trên giấy trong khi in. Đây là số lượng các dấu chấm bên cạnh một máy in/máy photocopy/máy fax có thể in dấu trong một inch giấy. Hầu hết các máy in có thể được thiết lập để in ở một DPI thấp hơn, bằng cách chỉ in mỗi chấm là hai, bốn, vv chấm. More...

Khi in một hình ảnh, có rất nhiều điều mà ảnh hưởng đến kích thước cuối cùng của hình ảnh trên giấy:

• Các kích thước của hình ảnh nguồn - đây là số lượng điểm ảnh hoặc dữ liệu có Là.
• DPI của hình ảnh nguồn. Giá trị này xác định cách tham số nên được diễn giải khi in hình ảnh.
• Nếu hình ảnh nguồn không có thông tin DPI được nhúng (JPEG có thể có ảnh GIF không bao giờ), chương trình đang được sử dụng có thể có cài đặt để chỉ định DPI. Đây có thể là trình xem/biên tập hình ảnh hoặc thậm chí là trình duyệt web.
• Hệ số thu phóng thường được chỉ định trong hộp thoại in.
• Cài đặt DPI hiện tại của máy in.
• DPI vật lý (tối đa) của máy in.

Dòng dưới cùng là hình ảnh bạn đang in sẽ được lấy lại hiệu quả (giảm hoặc mở rộng) để khớp với DPI cuối cùng được sử dụng trong quá trình in. Bất kỳ bên nào bị bắt buộc có thể gây ra điều này (chương trình, trình điều khiển in, máy in).

Bây giờ, hãy quay lại câu hỏi của bạn. Không, bạn không thể xác định DPI của màn hình, vì nó không nằm trong miền phần mềm. Đó là một thuật ngữ tên miền phần cứng, mô tả một màn hình lớn mà người dùng có thể mua được.Cập nhật: Tôi bước đầu đã viết câu trả lời này vào năm 2009, với sự hiểu biết của tôi về các công nghệ hiện tại. Như @thure đã chỉ ra, bây giờ bạn có thể (kể từ năm 2012?) Sử dụng chức năng window.matchMedia để xác định DPI của màn hình.

Nếu bạn đang cố gắng đạt được độ chính xác khi in bố cục HTML, như những người khác đã đề xuất, CSS của bạn nên sử dụng kích thước in như em, pt hoặc pc thay vì px. Tuy nhiên, kết quả cuối cùng vẫn có thể phụ thuộc vào trình duyệt sử dụng. Nếu chuyển đổi HTML sang PDF (hoặc tạo PDF từ đầu) là một tùy chọn cho bạn, việc in một tệp PDF sẽ cung cấp cho bạn WYSIWYG đúng nhất cả trên màn hình và giấy.

• Misunderstandings about dpi
• DPI, PPI, Pixels - Facts and Fallacies

Answer 2

Không có một cách mà tôi biết, tuy nhiên, họ có thể là một giải pháp thay thế:

Xác định số đo của bạn trong 'pt' và 'em', đó là số liệu tương đối màn hình.

http://www.w3schools.com/cssref/css_units.asp

https://css-tricks.com/the-lengths-of-css/

• em:
  1em bằng với kích thước phông chữ hiện hành. 2em có nghĩa là gấp 2 lần kích thước của phông chữ hiện tại. Ví dụ: nếu phần tử được hiển thị với phông chữ là 12 pt thì '2em' là 24 pt. Các 'em' là một đơn vị rất hữu ích trong CSS, vì nó có thể thích ứng tự động với phông chữ mà người đọc sử dụng
• pt:
  điểm (1 pt cũng giống như 1/72 inch)
• pc:
  pica (1 pc là giống như 12 points)

Answer 3

Hình như bạn có thể sử dụng đối tượng 'màn hình' DOM trong IE, tài sản có của nó đối với deviceXDPI, deviceYDPI, logicalXDPI, logicalYDPI.

hxxp: //www.w3schools.com/htmldom/dom_obj_screen.asp

Dưới đây là một giải pháp từ http://www.webdeveloper.com/forum/showthread.php?t=175278 (i havent thử nó, có vẻ như một tổng Hack :) Chỉ cần tạo một cái gì đó rộng 1 inch và đo bằng pixel!

HTML:

<div id="dpi"></div> 

Kiểu:

#dpi { 
    height: 1in; 
    left: -100%; 
    position: absolute; 
    top: -100%; 
    width: 1in; 
} 

Javascript:

function getDPI() { 
    return document.getElementById("dpi").offsetHeight; 
} 

Answer 4

Bạn có thể sử dụng window.devicePixelRatio tài sản để có được tỷ lệ rộng của màn hình/trang. Điều này làm việc tốt trong IE, Edge, Chrome và Firefox hiện tại trên máy tính để bàn (Windows), nhưng nó không có vẻ là một tiêu chuẩn hiện hành. Nó trả về 1 trên máy tính để bàn của tôi với một màn hình thông thường và 2 trên bề mặt với tỷ lệ 200%. Giá trị phải dao động từ 1.0 đến 3.0 những ngày này. Tôi có thể sử dụng điều này để chỉnh sửa kích thước phân phối hình ảnh động để cung cấp hình ảnh sắc nét hơn trên màn hình có độ phân giải cao.

Nếu bạn cần một số dpi/ppi hợp lý, nhân giá trị đó với 96. Nó sẽ không phải là ppi vật lý thực tế mặc dù, chỉ là những gì hệ điều trị xử lý nó như thế nào.

Answer 5

$(document).ready(function(){ 
 
     $("body").append("<div style='poosition:fixed;width:1cm;height:1cm;'class='SCREENDPITEST'></div>") 
 
     screen.dpi = Math.floor($(".SCREENDPITEST").width() * 2.54); 
 
    \t $(".SCREENDPITEST").remove() 
 
     document.write(screen.dpi) 
 
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>