Cho phép phóng to trong iFrame nhưng không phải trên trang trong iOS

Question

Tôi có một trang đơn giản với

<meta name="viewport" id="extViewportMeta" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> 

vào nó, với tất cả mọi thứ có kích thước độc đáo để hiển thị trên iPhone.

Nhưng khi tôi đặt iframe trên trang đó, mọi thứ bên trong iFrame không thể thu phóng và chia tỷ lệ với kích thước của trang gốc.

Làm cách nào để cho phép thu phóng trong khung nội tuyến mà không gây rối với phần còn lại của trang?

Answer 1

Rất tiếc, bạn không thể yêu cầu điều gì.

Trước hết, trong thẻ meta 'viewport', thuộc tính "nội dung" của bạn xác định rằng người dùng trang web của bạn KHÔNG thể phóng to. Đó là những gì các mệnh đề 'người dùng có thể mở rộng = không'.

Ngoài ra, quy mô tối đa và quy mô tối thiểu được đặt thành 1, vì vậy ngay cả khi bạn xóa 'người dùng có thể mở rộng = không', việc thu phóng sẽ bị vô hiệu hóa do bạn không có phạm vi mở rộng cho người dùng để phóng to bên trong.

Vì vậy, để bật thu phóng cho người dùng, bạn sẽ phải xóa người dùng có thể mở rộng = không và đặt các giá trị tỷ lệ tối thiểu và tối đa khác nhau.

Xem liên kết này để hiểu rõ hơn về các thiết lập cho 'viewport' thẻ meta:

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

Thứ hai, kể từ 'viewport' của bạn thẻ meta được thiết lập trên trang 'mẹ' của bạn, các thiết lập này áp dụng vào bất kỳ trang nào trong trang đó, tức là iframe cũng vậy. Liệu iframe có thẻ meta 'viewport' khác chỉ định các cài đặt khác nhau không quan trọng vì nó nằm trong và tuân theo cài đặt của cha mẹ.

Answer 2

Điều này là không thể vì iOS không cho phép phóng to - bạn chỉ có thể cuộn qua iFrame của mình. Đây có phải là trang web bên ngoài mà bạn sở hữu không? Nếu vậy, hãy thay đổi mã CSS và thêm nó vào chế độ xem như trong câu hỏi của bạn ở trên cùng.
Hoặc, bạn có thể tải dữ liệu bằng PHP. Bạn chắc chắn sẽ tìm thấy một giải pháp cho vấn đề của bạn - nếu không, hãy hỏi những câu hỏi tiếp theo.

Answer 3

Điều này có thể thông qua jQuery. Liên kết các sự kiện phóng to và thu phóng để không làm bất cứ điều gì khi phóng to và xoay bên ngoài các div mà bạn cho phép phóng to và thu phóng. Sau đó, đối với các div bạn muốn cho phép phóng to và thu phóng, bạn có thể sử dụng các plugin như Panzoom sử dụng "các phép biến đổi CSS3 và chức năng ma trận" để cho phép thu phóng và xoay.