Tắt tính năng Thu phóng Pinch trên Web Di động

Tôi muốn tắt tính năng Chụm và Thu phóng trên thiết bị di động.

Tôi nên thêm cấu hình nào vào khung nhìn?

Liên kết: http://play.mink7.com/n/dawn/

CHỈNH SỬA: Bởi vì điều này tiếp tục được bình luận, chúng tôi đều biết rằng chúng tôi không nên làm điều này. Câu hỏi đặt ra là tôi phải làm như thế nào , không nên làm như thế nào.

Thêm điều này vào thiết bị di động của bạn. Sau đó, tính chiều rộng của bạn theo tỷ lệ phần trăm và bạn sẽ ổn:

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

Thêm tính năng này cho các thiết bị không thể sử dụng chế độ xem:

<meta name="HandheldFriendly" content="true" />

điều này sẽ ngăn chặn bất kỳ hành động thu phóng nào của người dùng trong ios safari và cũng ngăn tính năng "thu phóng thành tab":

document.addEventListener('gesturestart', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gesturechange', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gestureend', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

jsfiddle: https://jsfiddle.net/vo0aqj4y/11/

Đây là tất cả những gì tôi cần:

<meta name="viewport" content="user-scalable=no"/>

Đối với tất cả những người đã nói rằng đây là một ý tưởng tồi, tôi muốn nói rằng nó không phải lúc nào cũng là một ý tưởng tồi. Đôi khi sẽ rất nhàm chán khi phải thu nhỏ để xem hết nội dung. Ví dụ: khi bạn nhập một đầu vào trên iOS, nó sẽ phóng to để đưa nó vào giữa màn hình. Bạn phải thu nhỏ sau đó vì việc đóng bàn phím không thực hiện được. Ngoài ra, tôi đồng ý rằng khi bạn dành nhiều giờ để tạo ra một bố cục và trải nghiệm người dùng tuyệt vời, bạn sẽ không muốn nó bị rối tung khi zoom.

Nhưng lập luận khác cũng có giá trị đối với những người có vấn đề về thị lực. Tuy nhiên, theo ý kiến ​​của tôi nếu bạn có vấn đề với mắt, bạn đã sử dụng các tính năng phóng to của hệ thống nên không cần phải xáo trộn nội dung.

Thật không may, giải pháp được cung cấp không hoạt động trong Safari 10+, vì Apple đã quyết định bỏ qua user-scalable=no. Chủ đề này có nhiều chi tiết hơn và một số lỗi JS: tắt chế độ thu phóng chế độ xem trên iOS 10+ safari?

IE có cách riêng của nó: Thuộc tính css, -ms-content-zoom. Đặt nó thành không có trên cơ thể hoặc một cái gì đó sẽ vô hiệu hóa nó.

Tắt tính năng chụm để phóng to trong IE10

http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx

Tìm thấy ở đây, bạn có thể sử dụng user-scalable=no:

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

Tôi nghĩ những gì bạn có thể đang theo đuổi là hành động chạm thuộc tính CSS . Bạn chỉ cần một quy tắc CSS như sau:

html, body {touch-action: none;}

Bạn sẽ thấy nó có hỗ trợ khá tốt ( https://caniuse.com/#feat=mdn-css_properties_touch-action_none ), bao gồm cả Safari, cũng như trở lại IE10.

Hãy thử với thuộc tính chiều rộng tối thiểu. Hay để tôi giải thích bạn. Giả sử một thiết bị có chiều rộng màn hình là 400px (ví dụ). Khi bạn phóng to, các phông chữ ngày càng lớn hơn. Nhưng các hộp và div vẫn có cùng chiều rộng. Nếu bạn sử dụng chiều rộng tối thiểu, bạn có thể tránh giảm div và hộp của mình.

Không chắc điều này có thể giúp được gì không, nhưng tôi đã giải quyết được vấn đề chụm / thu phóng (tôi muốn tránh người dùng phóng to trên ứng dụng web của mình) bằng cách sử dụng mô-đun búa góc:

Trong app.component.html của tôi, tôi đã thêm:

<div id="app" (pinchin)="pinchin();">

và trong app.component.ts của tôi:

  pinchin() {
      //console.log('pinch in');
  }