Thu phóng phần tử cụ thể trên nội dung web (HTML, CSS, JavaScript)

Question

Tôi muốn chỉ thu phóng phần tử cụ thể của trang web (một số div nhất định), nếu người dùng phóng to trang web trên thiết bị di động. Bức tranh sau đây cho thấy ý tưởng của tôi:

Như bạn có thể thấy, các thử nghiệm được thu nhỏ nhưng div đầu vẫn như kích thước tương tự; chỉ có div chứa thử nghiệm được thu phóng/thu nhỏ.

Ai đó có thể cho tôi một số mẹo về cách đạt được điều này? Tôi thực sự không biết bắt đầu từ đâu.

CẬP NHẬT: http://jsfiddle.net/WyqSf/. nếu tôi phóng to trên trang này, nó sẽ mở rộng cả hai yếu tố. Tôi chỉ muốn điều chỉnh phần tử nội dung khi phóng to. Một cách tôi có thể nghĩ đến để đạt được điều này là để lấy người dùng-đầu vào và sử dụng javascript để điều chỉnh chiều rộng của div nhưng điều này là mâu thuẫn với hành vi thông thường.

Pseudo-code:

container.mousemove { 
    content.changeWidth();.. 
} 

Answer 1

Để làm được điều này, bạn sẽ cần phải sửa chữa khung nhìn của người dùng để họ không thể véo phóng to trang và sau đó sử dụng thư viện sự kiện cảm ứng như Hammer.js để đính kèm gọi lại vào cử chỉ thu phóng chụm để thay đổi kích thước phần tử phù hợp trên trang bạn muốn mở rộng một cách thích hợp.

viewport sửa chữa xảy ra trong thành phần lãnh đạo html của bạn:

<meta name="viewport" content="width=device-width, maximum-scale=1.0"> 

bạn sẽ sử dụng hammer.js để phát hiện một "nhúm zoom" cử chỉ, và thư viện cung cấp cho bạn một đối tượng event.gesture rất chi tiết mà bạn có thể sử dụng để phát hiện tốc độ/tốc độ người dùng đang phóng to.

Sự thay đổi khoảng cách giữa 2 điểm chạm trong khi véo được biểu diễn bởi event.gesture.scale (see hammer documentation), nếu tỷ lệ tăng, tăng văn bản cho phù hợp ... nếu nó giảm kích thước văn bản. Sử dụng Math:

$('body').hammer().on("pinch", function(event) { 
    console.log(event.gesture.scale); 
    // do math... 
}); 

Tôi tưởng tượng bạn sẽ có được ý tưởng ...

Answer 2

Bạn có thể sử dụng các plugin Zoomooz. Bên trong tài liệu hướng dẫn, kiểm tra phần Zooming inside a container - đây là những gì bạn có thể cần:

<div class="zoomViewport"> 
    <div class="zoomContainer"> 
     <div class="zoomTarget">Target 1</div> 
     <div class="zoomTarget">Target 2</div> 
    </div> 
</div> 

Check the JS Fiddle