Hướng dẫn Làm cho iframe có khả năng thích ứng trong html

Hướng dẫn Làm cho iframe có khả năng thích ứng trong html

Bản thân iframe ('khung') có thể có khả năng thích ứng. Nhưng mọi thứ bên trong iframe là một trang riêng biệt, và do đó không thuộc phạm vi của CSS hay JavaScript của bạn. Để nhúng iframe hiển thị tốt (responsive) trên mọi thiết bị, giải pháp tối ưu là bọc iframe trong một thẻ div cố định tỷ lệ khung hình hoặc sử dụng thuộc tính CSS aspect-ratio. Cách này giúp khung hình tự co giãn theo chiều rộng màn hình nhưng vẫn giữ nguyên tỷ lệ gốc. Mối quan tâm chính của tôi là khi độc giả truy cập blog của tôi trên iPhone, tôi không muốn mọi thứ đều có chiều rộng x (100% cho toàn bộ nội dung) và sau đó iFrame hoạt động không đúng cách, trở thành phần tử duy nhất rộng hơn (và do đó nhô ra khỏi tất cả nội dung khác - bạn hiểu ý tôi chứ?). Có ai biết tại sao nó không hoạt động không? 1. Phương pháp dùng tỷ lệ khung hình (Aspect Ratio CSS) Đây là cách phổ biến và gọn gàng nhất. Bạn sử dụng CSS để khóa tỷ lệ khung hình và thiết lập chiều rộng tự động. .wrapper { width: 100%; height: 100%; …