Làm thế nào để bạn xử lý thu phóng trình duyệt của khách hàng?

Tôi có rất nhiều hình ảnh trên một trang, một bộ sưu tập. Tôi muốn hình ảnh luôn sắc nét, vì vậy tôi không thực hiện bất kỳ tỷ lệ trình duyệt nào, tôi sử dụng kích thước ban đầu của hình ảnh.

Tuy nhiên, điều này chỉ hoạt động khi mức thu phóng của trình duyệt là 100%. Khi tôi tăng hoặc giảm mức thu phóng, chất lượng hình ảnh sẽ giảm.

Một số khách hàng thực sự có các mức thu phóng khác nhau theo mặc định. Tôi đã tự hỏi, làm thế nào bạn có thể xử lý nó và chúng ta có xử lý nó không?

Chúc mừng

Tôi nghĩ rằng hầu hết các câu trả lời khác đã bỏ lỡ điểm: đây không phải là ghi đè lên sở thích của người dùng, đó là về việc cung cấp hình ảnh chất lượng tốt nhất trong kịch bản chung của thiết bị người dùng gán nhiều hơn một pixel vật lý cho mỗi pixel CSS hay còn gọi là " pixel tham chiếu "Trong hình ảnh của bạn, dẫn đến trình duyệt mở rộng hình ảnh, làm cho nó bị pixel và nổi hạt.

Các giải pháp được đề xuất của tôi dưới đây, nhưng trước tiên đây là bốn cách điều này có thể xảy ra:

• Hiếm nhất: người dùng chọn phóng to . Không phải là một vấn đề lớn, vì đó là sự lựa chọn của họ.
• Đáng ngạc nhiên phổ biến: trình duyệt của người dùng được phóng to theo mặc định . Ví dụ: theo mặc định, nhiều máy Windows có mật độ pixel cao được phóng to lên 125% hoặc hơn và Firefox gần đây (thật khó hiểu!) Trong trường hợp này, nó nói với người dùng rằng chúng được phóng to tới 100% khi chúng thực sự được phóng to tới 125% , khiến họ gãi đầu tự hỏi tại sao mọi thứ đột nhiên trông nổi hạt.
• Rất phổ biến: hầu hết các thiết bị Android (và các thiết bị khác?) Có tỷ lệ pixel lớn hơn 1. Điều này có nghĩa là mọi "pixel CSS" thực sự được hiển thị bằng nhiều pixel vật lý - do đó, hình ảnh 200px x 200px width: 200px; height: 200px;sẽ được chia tỷ lệ thực sự hình ảnh 200px x 200px trên hơn 200 x 200 pixel, có khả năng làm cho nó nổi hạt.
• Rất phổ biến: nhiều thiết bị hiện đại của Apple có " màn hình retina ". Điều này về cơ bản giống như một thiết bị Android có tỷ lệ pixel là 2, nhưng với khả năng tiếp thị tốt hơn và một vài thuộc tính tùy chỉnh cho phép phát hiện theo tên.

Bất kỳ điều nào trong số này sẽ dẫn đến vấn đề của John về một bộ sưu tập hình ảnh trông đáng kinh ngạc.

Tôi đã hy vọng ai đó sẽ có một giải pháp tuyệt vời cho vấn đề này, nhưng bây giờ đây là những lựa chọn ưa thích của tôi, bắt đầu với hiệu quả nhất nhưng ít phổ biến nhất có thể:

1. Nếu có thể, hãy truy cập vectơ - SVG (hoặc Raphael.js nếu bạn vẫn cần hỗ trợ IE8). Trên thực tế, đây chỉ là một tùy chọn cho các biểu tượng, sơ đồ, v.v. và nó không bao giờ là một tùy chọn cho ảnh. SVG rất phức tạp cũng có thể trở nên cồng kềnh trên các điện thoại di động cấp thấp do yêu cầu xử lý.
2. Nếu có thể, hãy phát hiện tỷ lệ pixel của thiết bị và phân phát hình ảnh dựa trên đó. Điều này cũng có thể giải quyết vấn đề Firefox trên Windows vì Firefox trên Windows thay đổi cách đọc tỷ lệ pixel khi phóng to và thu nhỏ. Nhược điểm là, nó trở thành một vấn đề mã hóa phức tạp liên quan đến công việc phát triển ở phía máy chủ và máy khách.

3. Nếu 1. và 2. không thể, nhưng nó thực sự quan trọng và chất lượng hình ảnh quan trọng hơn, giả sử, thời gian tải, chỉ cần tăng gấp đôi hình ảnh.

   • Đây là những gì Google làm với logo của họ trên trang chủ của họ: họ nén hình ảnh PNG 538px x 190px trong một thùng chứa 269px x 95px. Nó cũng ít nhiều giống như cách hình ảnh phản hồi hoạt động.

   • Điều này từng được coi là thông lệ xấu vì các phiên bản IE cũ rất tệ trong việc thu nhỏ hình ảnh, nhưng hiện tại chúng rất hiếm khi được sử dụng và ít phổ biến hơn nhiều so với màn hình mật độ pixel cao. Điều này vẫn hơi không mong muốn vì nó sẽ tăng kích thước hình ảnh và do đó tăng thời gian tải - đó là một sự đánh đổi mà bạn cần để đánh giá từng trường hợp cụ thể.

   • Kích thước nhân đôi là phổ biến vì rất ít thiết bị có tỷ lệ lớn hơn 2, rất ít người dùng được phóng to hơn 200% và tỷ lệ hình ảnh 50% sạch hơn so với số lượng khác.
4. Nếu 1, 2 không thể và thời gian tải quá cao thì ưu tiên cho 3, tôi không biết về bất kỳ tùy chọn nào khác và khuyến nghị của tôi là không lo lắng về điều đó, vì một nửa các trang web trên internet có cùng một vấn đề và những người có vấn đề này trên trang web của bạn cũng sẽ gặp vấn đề này trên các trang web khác. Chết tiệt, Firefox trên Windows thậm chí làm pixel các nút UI của chính nó ...

Như DA01 nhận xét, bạn không nên làm bất cứ điều gì về nó.

Thu phóng là một tùy chọn do người dùng chỉ định và do đó nằm dưới sự kiểm soát của họ. Các cài đặt họ quyết định gây rối không nên là trách nhiệm của bạn.

Bạn có thể chiếm tài khoản cho các trình duyệt và phiên bản khác nhau và những gì không, nhưng nói một cách hợp lý, bạn không nên tính đến thu phóng của người dùng.

Chắc chắn bạn có thể chiếm 125% hoặc 150% (và thậm chí bạn có thể không phải). Nhưng 200%, 300%, nhiều hơn nữa? Nó không có nghĩa gì cả.

Nếu người dùng sử dụng chủ đề cửa sổ có độ tương phản cao thì sao? Nếu họ liên tục sử dụng kính lúp thì sao? Ai quan tâm?

Lý tưởng nhất là trang web của bạn đủ linh hoạt để nó không tạo ra sự khác biệt thực sự giữa chênh lệch thu phóng nhỏ, nhưng hình ảnh sẽ giảm chất lượng khi thu phóng nhưng đó không phải là trách nhiệm của bạn.

Tất nhiên đây chỉ là ý kiến ​​của tôi, nhưng công ty tôi làm việc cũng nói rõ với khách hàng rằng chúng tôi không hỗ trợ sở thích phóng to của họ.

Những người khác đã đưa ra một số lời khuyên tuyệt vời về các vấn đề mà bạn sẽ gặp phải và tôi không đủ giỏi trong lĩnh vực này để thực hiện một hướng dẫn tốt nhưng ...

Bạn có thể muốn thiết kế một trang web đáp ứng điều chỉnh theo độ phân giải / thiết bị của người dùng và sau đó bạn có thể đang tìm mã sẽ chuyển hình ảnh sang tệp độ phân giải cao hơn hoặc thấp hơn khi được yêu cầu, thay vì kéo dài và ép hình ảnh bạn có.

Khi tôi cố gắng làm điều này lần cuối, tôi đã sử dụng media-query.js và imagefill.js. Xem: http://responsiveesign.is/resource/images/picture-fill . Tôi có bố cục 3 cột trong đó một số hình ảnh sẽ trải dài hai cột ... Khi cửa sổ trình duyệt đủ nhỏ, các hình ảnh lớn sẽ chuyển sang phiên bản độ phân giải nhỏ hơn chỉ rộng một cột. Trình duyệt của người dùng sẽ chỉ tải phiên bản của tệp mà họ cần. (và trong trường hợp của tôi, plugin nề sẽ di chuyển mọi thứ để chứa).

Tất nhiên sau đó người dùng của bạn phải kích hoạt javascript ...

Bạn không thể ép buộc người dùng. Các cài đặt người dùng không phải là của bạn để chơi với. Cài đặt và phá vỡ chúng là một ý tưởng tồi có thể có một lý do tại sao người dùng đã làm một cái gì đó. Trong cả hai trường hợp, bạn không thể đảm bảo bất cứ điều gì trên các thiết bị khác nhau.

Trong thực tế nếu bạn đi vào khía cạnh kỹ thuật, nó sẽ trở nên thú vị hơn. Bạn thực sự cung cấp chìa khóa cho vương quốc với trang web của bạn. Xem người dùng tải xuống trang web và bây giờ người dùng có thể làm bất cứ điều gì họ muốn với nó. Bạn không có quyền kiểm soát lớp này, đó là sau khi tất cả chạy trên máy người dùng và họ có thể làm bất cứ điều gì họ muốn. Ngay cả stackexhange cũng không giống trên máy tính / điện thoại di động của tôi giống như trên máy tính của bạn. Tôi tự động thay đổi một số khía cạnh của GUI, để sửa 2 lỗi kết xuất và đã thêm 2 phím tắt.

Hành vi khó chịu của việc nâng cấp hình ảnh trên màn hình HiDPI, dẫn đến những bức ảnh mờ (hay còn gọi là cơn ác mộng của các nhiếp ảnh gia), cũng đã gây rắc rối cho tôi trong một thời gian khá dài. Tôi cũng tự hỏi rằng không có thuộc tính CSS đơn giản nào để vô hiệu hóa nó cho hình ảnh.

Giải pháp hiện tại của tôi với CSS trông như thế này:

@media only screen and (min--moz-device-pixel-ratio: 1.25),
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
    (-o-min-device-pixel-ratio: 7/4),
    (-webkit-min-device-pixel-ratio: 1.75),
    (min-device-pixel-ratio: 1.75) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
    (-o-min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2.00),
    (min-device-pixel-ratio: 2.00) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
        }
}

Bước tiếp theo sẽ là sử dụng các lớp để xác định và đặt các kích thước hình ảnh khác nhau nếu cần. Tôi không biết một cách linh hoạt để có được kích thước hình ảnh. Hàm CSS attr () dường như không hoạt động cho việc này.

Vì vậy, đây sẽ là nhiều hơn một câu hỏi lập trình. Nhưng khi sử dụng JQuery, hoặc thậm chí chỉ css máy bay, bạn có thể hiển thị các hình ảnh khác nhau dựa trên chiều rộng màn hình, chiều cao màn hình của người dùng, v.v.

Một lần nữa, mặc dù điều này có lẽ không phải là stackexchange để hỏi.

Bạn có thể chỉ cần làm điều này thông qua HTML trong phần đầu của trang web thêm điều này

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Điều này không được các nhà phát triển khuyến nghị cho mọi loại trang web nhưng sẽ hoàn thành những gì bạn yêu cầu.

Hy vọng nó sẽ giúp: chuyển đổi quy tắc css: tỷ lệ trên thẻ cơ thể hoặc khác - không hoàn hảo xem tại đây, vui lòng:

/programming/23099849/stop-firefox-dpi-scaling-when-windows-setting-is-at-125/42755741#42755741