Dừng Firefox DPI Scaling (khi cài đặt Windows là 125%)

Question

Tôi hiện đang tạo một trang web và thử nghiệm nó trong chrome hoạt động tốt, nhưng trong Firefox - nó được phóng to.

Điều này là do DPI của tôi Windows được đặt thành 125% và Firefox phát hiện điều này và điều chỉnh mọi trang web tương ứng.

Tuy nhiên, trang web của tôi không có nghĩa là được xem ở mức thu phóng như vậy, hình ảnh không được hiển thị lớn và do đó nó trông mờ/pixel. Cách bố trí chung của trang cũng bị rối tung vì mọi thứ quá lớn.

Hiện tại, điều này không ảnh hưởng đến hầu hết mọi người - vì DPI của họ sẽ ở mức 100% trong Windows. Tuy nhiên, tôi muốn nó giống nhau trên tất cả các trình duyệt.

Tôi đã tìm kiếm và đã tìm thấy giải pháp để người dùng tắt tính năng "này" - nhưng tôi muốn có thể vô hiệu hóa tính năng này từ trang web của mình - do đó, nó không có vẻ sai với người dùng ở nơi đầu tiên .

ví dụ: một bài nói:

1) Gõ about:config trong thanh địa chỉ
2) tìm kiếm layout.css.devPixelsPerPx
3) giá trị thay đổi layout.css.devPixelsPerPx-1.0-1.0

Nhưng đó không phải là những gì tôi đang tìm kiếm . Có cách nào để vô hiệu hóa tính năng này từ CSS/HTML/bất kỳ thứ gì không?

Cảm ơn.

Answer 1

Điều này làm tôi thất vọng, nhưng may mắn có một giải pháp.

Điều hướng đến about:config. (Nhấp vào chấp nhận trên bất kỳ cảnh báo nào để bạn cẩn thận với các tính năng nâng cao)

Tìm kiếm layout.css.devPixelsPerPx và thay đổi giá trị thành 1.0 và sự cố của bạn phải được khắc phục.

Đó là nội dung được triển khai trong Firefox 22.

Answer 2

Đặt thành 1.25: giữ giao diện người dùng lớn hơn, nhưng đặt lại trang web thành ánh xạ 100% pixel.

Answer 3

Bạn có thể dễ dàng cho phép người dùng địa chỉ trang web của bạn với các thiết lập ở mức zoom cao hơn bằng cách bao gồm một truy vấn phương tiện truyền thông như:

@media only screen and(-webkit-min-device-pixel-ratio: 1.25), 
     only screen and(  -o-min-device-pixel-ratio: 5/4), 
     only screen and(min-resolution: 120dpi), 
     only screen and(min-resolution: 1.25dppx) { 
    body { 
     font-size: 1rem; 
    } 
} 

Xem this article for an extended explanation và tại sao dọn dẹp giải pháp của truy vấn phương tiện truyền thông là đủ cho một trình duyệt rộng hỗ trợ: IE9 +, Fx3.5 +, Opera9.5 +, Trình duyệt webkit Chrome và Safari, cả Máy tính để bàn và Thiết bị di động.

Answer 4

Bạn có thể thử một cái gì đó như thế này bên dưới. Có một số cảnh báo bằng cách sử dụng này, nhưng đối với một số tình huống nó là giá trị sử dụng nó.

@media screen and (min-resolution: 120dpi) { 
    /*body {transform: scale(0.8);width: 125%;height: 125%;margin-left: -12.5%;}*/ 
    body {transform: scale(0.8);transform-origin:top left;width: 125%;height: 125%;} 
} 

Đã nhận xét /*body....*/ quy mô mẫu có thể dễ hiểu hơn, f.e. vì nên thực hiện mở rộng quy mô dựa trên quy tắc css biến đổi nguồn gốc trên cùng bên trái. Sau đó mọi thứ có thể được hiển thị tốt hơn, đặc biệt là trong Chrome.

nếu bạn sử dụng width: 125%, cWD RWD của bạn sẽ phản ứng khác với thay đổi kích thước trình duyệt trên tài khoản này từ những gì bạn mong đợi khi tỷ lệ màn hình là 100%. Và bạn có thể chấp nhận hợp lý điều này - đây là RWD và chênh lệch là 25%. Nhưng một số người có thể muốn điều chỉnh css của họ như thế này:

@media screen and (min-width: 1000px) 

bạn cũng cần phải điều chỉnh:

@media screen and (min-width: 800px) 

lẽ không 1250px nhưng 800px như tôi đã làm.

Cạnh, Chrome, FF hoạt động khá tốt. IE 11 mang lại điều tồi tệ nhất nhưng không phải là vô vọng.

Có một số vấn đề trong FF (không cạnh, chrome) khi mở rộng các trường chọn - giải pháp chọn css. Một số đường biên có thể được nhìn thấy một số biến đổi trên FF (có thể không phải cạnh, chrome)

Có thể có một số vấn đề không được đề cập ở đây như khi bạn sử dụng carousel như owlcarousel trên trang của bạn.

Tuy nhiên, tôi nghĩ rằng khả năng tiết kiệm được nhiều thời gian hơn với ví dụ này được thử nghiệm vẫn còn quá ít.

Bạn phải sử dụng tỷ lệ chính xác như 0.8 cho màn hình 125% để hình ảnh của bạn hiển thị sắc nét nhất có thể.

Tôi nhận thấy rằng khi chuyển sang độ phân giải dpi khác nhau bằng ctrl +/i trong trình duyệt trên máy tính để bàn và chắc chắn sử dụng cử chỉ đa cảm ứng trong trình duyệt di động, trình duyệt cũng thay đổi dpi, vì vậy bất kỳ giải pháp nào sử dụng @media min/max-resolution không hoạt động như mong đợi. Điều cần thiết trong css là đọc độ phân giải hệ thống chứ không phải trình duyệt. Tuy nhiên khi tôi thấy thay đổi độ phân giải này không diễn ra như sau đó khi ai đó thay đổi kích thước trình duyệt theo cách thủ công hoặc bằng cách xoay thiết bị di động.

Cảm ơn bạn Tatsuyuki Ishi đã sửa một số lỗi trong câu trả lời của tôi.