143

Tôi gặp khó khăn khi tìm tài liệu cho việc này. Là Safari cụ thể?

Có một lỗi gần đây trong iOS 9 ( tại đây ), giải pháp được thêm shrink-to-fit=novào meta khung nhìn.

Mã này làm gì?

— 755
nguồn

193

Đó là Safari cụ thể, ít nhất là tại thời điểm viết, được giới thiệu trong Safari 9.0. Từ "Có gì mới trong Safari?" tài liệu cho Safari 9.0 :

Thay đổi khung nhìn

Các thẻ meta "width=device-width"của chế độ xem sử dụng khiến trang bị thu nhỏ lại để phù hợp với nội dung vượt quá giới hạn lượt xem. Bạn có thể ghi đè hành vi này bằng cách thêm "shrink-to-fit=no"vào thẻ meta của mình như hiển thị bên dưới. Giá trị gia tăng sẽ ngăn trang mở rộng để phù hợp với chế độ xem.

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Nói tóm lại, việc thêm nó vào thẻ meta khung nhìn sẽ khôi phục hành vi trước Safari 9.0.

Thí dụ

Đây là một ví dụ trực quan hoạt động cho thấy sự khác biệt khi tải trang trong hai cấu hình.

Phần màu đỏ là chiều rộng của chế độ xem và phần màu xanh được đặt bên ngoài chế độ xem ban đầu (ví dụ left: 100vw). Lưu ý làm thế nào trong ví dụ đầu tiên, trang được phóng to để phù hợp khi shrink-to-fit=nobị bỏ qua (do đó hiển thị nội dung ngoài tầm nhìn) và nội dung màu xanh vẫn tắt màn hình trong ví dụ sau.

Mã cho ví dụ này có thể được tìm thấy tại https://codepen.io/davidjb/pen/ENGqpv .

Không có thu nhỏ để phù hợp với chỉ định

Với co lại để vừa vặn = không

— davidjb
nguồn

Tôi xin lỗi, nhưng tôi vẫn không hiểu mã đó làm gì. Bạn có thể giải thích theo một cách khác? Cảm ơn!

— Daniel Springer

@Dani Theo mặc định, Safari sẽ phóng to một trang để phù hợp với bất kỳ nội dung nào tràn ra khung nhìn (ví dụ đầu tiên hiển thị vùng màu xanh lam như có thể nhìn thấy; đó là tràn ra). Việc chỉ định shrink-to-fit=nongăn chặn hành vi này, để mức thu phóng một mình và để nội dung tràn ra ngoài màn hình. Hãy thử ví dụ Codepen trên iDevice (hoặc Trình mô phỏng iOS) của bạn và thử thay đổi cài đặt. Có lẽ nhìn thấy sự thay đổi tương tác sẽ giúp.

— davidjb

Ah tôi thấy. Nhưng tại sao ai đó muốn một phần nội dung của họ bị ẩn trên màn hình nhỏ hơn?

— Daniel Springer

@Dani Nhiều lý do, nhưng ví dụ nhanh là thanh trượt / băng chuyền đặt nội dung bên ngoài chế độ xem hoặc nội dung không phản hồi lớn (ví dụ: hình ảnh / bảng) nếu không sẽ tràn ra và làm cho phần còn lại của trang trở nên nhỏ bé với mặc định shrink-to-fithành vi. Với shrink-to-fit=no, trang vẫn ở kích thước mong đợi, cho phép nội dung tràn qua khung nhìn. Người dùng có thể (thường) vẫn cuộn hoặc thu nhỏ để xem nội dung tràn nhưng chế độ xem ban đầu khớp với kích thước thiết bị.

— davidjb

@davidjb Tôi nghĩ rằng điều này đã được sửa với iOS 11. mới nhất. Tôi không thể tạo lại lỗi này.

— Zeel Shah

Theo thống kê về mức độ sử dụng iOS, cho thấy mức sử dụng iOS 9.0-9.2.x hiện ở mức 0,17%. Nếu những con số này thực sự là dấu hiệu cho thấy việc sử dụng toàn cầu các phiên bản này, thì thậm chí nhiều khả năng sẽ an toàn hơn để loại bỏ thu nhỏ để phù hợp với thẻ meta chế độ xem của bạn.

Sau 9.2.x. IOS xóa thẻ này kiểm tra trên trình duyệt của nó.

Bạn có thể kiểm tra trang này https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html

— GGGin
nguồn

Thuộc tính meta viewport co lại để phù hợp làm gì?

Thay đổi khung nhìn

Thí dụ

Không có thu nhỏ để phù hợp với chỉ định

Với co lại để vừa vặn = không