phát hiện pinch để phóng to trên iOS

Question

Tôi đang cố gắng phát hiện pinch để phóng sự kiện trên iOS (và Android thực sự) vì tôi đang sử dụng jQuery Mobile để hiển thị các trang có tiêu đề cố định. Trong một thế giới giấc mơ, điều tôi muốn là tiêu đề không thu phóng nhưng phần còn lại của trang sẽ làm như vậy. Nhưng tôi biết điều này là không thể. Trên hầu hết các trang, tôi có phiên bản di động tự thay đổi kích thước độc đáo để thu phóng không cần thiết, nhưng trên 'bìa trước', ứng dụng khách muốn người dùng có thể xem toàn bộ trang (thu nhỏ để vừa) với cố định tiêu đề đủ lớn để có thể sử dụng được (nghĩa là cùng kích thước tương ứng như trên các trang được tối ưu hóa cho thiết bị di động) và có thể phóng to chỉ trên hình ảnh bìa - rời khỏi thanh tiêu đề có cùng kích thước.

Sự cố là khi người dùng pinchể phóng to, thanh tiêu đề này sẽ trở nên không nhất thiết phải lớn. Vì vậy, những gì tôi muốn có thể làm là phát hiện mức thu phóng bị chèn ép hiện tại và chia tỷ lệ xuống thanh tiêu đề cố định để nó 'trông' có cùng kích thước (so với giao diện điện thoại xung quanh) trong khi trang cơ bản là Tôi có thể làm điều này với hình ảnh phù hợp với một div chiều rộng 100% nhưng tôi cần div đó để tái trang bị khu vực hiển thị thực tế còn sót lại sau khi phóng to và chính giữa khi kéo.

Tôi cũng muốn thực hiện một phần của quá trình chuyển đổi jQuery Mobile, làm sống động zoom trở lại 1: 1 để các trang sau 'thân thiện với thiết bị di động' không được phóng to, vì chúng không cần thiết.

Vì vậy, có bất kỳ ai có ý tưởng bắt đầu từ đâu không?

Answer 1

Bạn có thể đính kèm sự kiện vào phần thân/vùng chứa của trang chính sẽ báo cáo mức tỷ lệ hiện tại. Ví dụ: sử dụng jQuery:

$(container).bind("gesturechange", function(event) { 

     var scale = event.originalEvent.scale; 

     ...do some logic for header here. 
    }); 

Nếu bạn không sử dụng "event.preventDefault", toàn bộ trang sẽ cuộn chính xác và tiêu đề phải tự sửa theo logic của bạn. Bạn cũng có thể muốn liên kết với các sự kiện "gesturestart" và "gestureend".

Tiếp tục đọc/giải thích: http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Answer 2

"Trong một thế giới ước mơ những gì tôi muốn là cho tiêu đề không để phóng to nhưng đối với phần còn lại của trang để làm như vậy."

Bạn có thể đặt header.style.WebkitTransform = 'scale(' + zoomvalue + '); trong sự kiện gesturechange để "hoàn tác" mức thu phóng (mô phỏng đầu trang không thu phóng).

Làm cho tiêu đề của bạn có chiều rộng cố định và áp dụng tỷ lệ thu phóng giữa chiều rộng và cửa sổ đó.bướcWidth.

AFAIK không có cách nào để tìm ra mức thu phóng thực tế, vì nó phụ thuộc vào tỷ lệ điểm ảnh device-independent-pixel (DIP) và AFAIK không có cách nào để tìm hiểu điều đó từ JavaScript.