tắt chế độ xem phóng to thu nhỏ iOS 10+ safari?

Tôi đã cập nhật iPhone 6 cộng với iOS phiên bản 10 beta của tôi và chỉ phát hiện ra rằng trong safari di động, bạn có thể phóng to bất kỳ trang web bằng cách khai thác đôi hoặc véo IGNORE các user-scalable=nomã trong thẻ meta. Tôi không biết đó là lỗi hay tính năng. Nếu nó được coi là một tính năng, làm thế nào để chúng tôi vô hiệu hóa chế độ xem phóng to thu nhỏ iOS 10?

được cập nhật trên phiên bản iOS 11/12, safari iOS 11 và iOS 12 vẫn KHÔNG tôn trọng user-scalable=nothẻ meta.

Có thể ngăn quy mô trang web trong safari trên iOS 10, nhưng nó sẽ liên quan đến nhiều công việc hơn từ phía bạn. Tôi đoán lập luận là một mức độ khó sẽ ngăn các nhà phát triển hàng hóa bỏ "người dùng có thể mở rộng = không" vào mọi thẻ xem và khiến mọi thứ trở nên khó khăn đối với người dùng bị suy giảm thị lực.

Tuy nhiên, tôi muốn thấy Apple thay đổi cách triển khai của họ để có một cách đơn giản (thẻ meta) để vô hiệu hóa hai lần nhấn để thu phóng. Hầu hết những khó khăn liên quan đến sự tương tác đó.

Bạn có thể dừng pinch-to-zoom bằng một cái gì đó như thế này:

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, false);

Lưu ý rằng nếu bất kỳ mục tiêu sâu hơn nào gọi stopPropagation trong sự kiện, sự kiện sẽ không đến được tài liệu và hành vi mở rộng sẽ không bị ngăn chặn bởi người nghe này.

Vô hiệu hóa hai lần nhấn để thu phóng là tương tự. Bạn tắt bất kỳ lần nhấn nào trên tài liệu xảy ra trong vòng 300 mili giây của lần nhấn trước:

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
  var now = (new Date()).getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

Nếu bạn không thiết lập đúng các thành phần biểu mẫu của mình, việc tập trung vào đầu vào sẽ tự động thu phóng và vì bạn hầu như đã vô hiệu hóa thu phóng thủ công, giờ đây sẽ gần như không thể làm mờ. Đảm bảo kích thước phông chữ đầu vào là> = 16px.

Nếu bạn đang cố gắng giải quyết vấn đề này trong WKWebView trong ứng dụng gốc, thì giải pháp đưa ra ở trên là khả thi, nhưng đây là một giải pháp tốt hơn: https://stackoverflow.com/a/31943976/661418 . Và như đã đề cập trong các câu trả lời khác, trong iOS 10 beta 6, Apple hiện đã cung cấp một lá cờ để tôn vinh thẻ meta.

Cập nhật tháng 5 năm 2017: Tôi đã thay thế phương pháp 'kiểm tra độ dài chạm trên touchstart' cũ để vô hiệu hóa pinch-zoom bằng cách tiếp cận 'check event.scale trên touchmove' đơn giản hơn. Nên đáng tin cậy hơn cho mọi người.

Đây là một tính năng mới trong iOS 10.

Từ ghi chú phát hành iOS 10 beta 1:

• Để cải thiện khả năng truy cập trên các trang web trong Safari, giờ đây người dùng có thể chụm lại để phóng to ngay cả khi một trang web đặt user-scalable=notrong chế độ xem.

Tôi hy vọng chúng ta sẽ sớm thấy một tiện ích bổ sung JS để vô hiệu hóa điều này theo một cách nào đó.

Tôi đã có thể khắc phục điều này bằng cách sử dụng thuộc tính touch-actioncss trên các thành phần riêng lẻ. Hãy thử thiết lập touch-action: manipulation;trên các yếu tố thường được nhấp vào, như liên kết hoặc nút.

Có vẻ như hành vi này được cho là đã thay đổi trong phiên bản beta mới nhất, tại thời điểm viết là phiên bản beta 6.

Từ ghi chú phát hành cho iOS 10 Beta 6:

WKWebViewbây giờ mặc định tôn trọng user-scalable=notừ một khung nhìn. Khách hàng của WKWebViewcó thể cải thiện khả năng tiếp cận và cho phép người dùng pinch-to-zoom trên tất cả các trang bằng cách thiết lập các WKWebViewConfiguration tài sản ignoresViewportScaleLimitsđể YES.

Tuy nhiên, trong thử nghiệm (rất hạn chế) của tôi, tôi chưa thể xác nhận đây là trường hợp.

Chỉnh sửa: đã xác minh, user-scalable=nomặc định iOS 10 Beta 6 tôn trọng tôi.

Cách giải quyết mà tác phẩm trong Mobile Safari tại thời điểm này trong văn bản, là phải có các đối số thứ ba trong addEventListenerbe { passive: false }, do đó vẻ workaround đầy đủ như thế này:

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });

Bạn có thể muốn kiểm tra nếu các tùy chọn được hỗ trợ để vẫn tương thích ngược.

Tôi đã dành khoảng một giờ để tìm kiếm một tùy chọn javascript mạnh mẽ hơn và không tìm thấy tùy chọn nào. Nó chỉ xảy ra rằng trong vài ngày qua, tôi đã loay hoay với búa.js (Hammer.js là một thư viện cho phép bạn thao tác dễ dàng với tất cả các loại sự kiện chạm) và hầu như không làm được những gì tôi đang cố gắng làm.

Với sự cảnh báo đó và hiểu tôi không phải là một chuyên gia javascript, đây là một giải pháp mà tôi đã đưa ra về cơ bản là tận dụng búa.js để ghi lại các sự kiện pinch-zoom và chạm hai lần, sau đó đăng nhập và loại bỏ chúng.

Hãy chắc chắn rằng bạn đã đưa búa.js vào trang của mình và sau đó thử dán javascript này vào đầu ở đâu đó:

< script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script >
< script type = "text/javascript" >

  // SPORK - block pinch-zoom to force use of tooltip zoom
  $(document).ready(function() {

    // the element you want to attach to, probably a wrapper for the page
    var myElement = document.getElementById('yourwrapperelement');
    // create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
    var hammertime = new Hammer(myElement, {
      prevent_default: false,
      touchAction: "pan"
    });

    // pinch is not enabled by default in hammer
    hammertime.get('pinch').set({
      enable: true
    });

    // name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
    hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
      console.log('captured event:', e.type);
      e.preventDefault();
    })
  });
</script>

Tôi đã thử câu trả lời trước về pinch-to-zoom

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, false);

tuy nhiên đôi khi màn hình vẫn phóng to khi event.touches.length> 1 Tôi phát hiện ra cách tốt nhất là sử dụng sự kiện touchmove, để tránh bất kỳ ngón tay nào di chuyển trên màn hình. Mã sẽ giống như thế này:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();      
}, false);

Hy vọng nó sẽ giúp.

Kiểm tra hệ số tỷ lệ trong sự kiện touchove sau đó ngăn sự kiện chạm.

document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
        event.preventDefault();
    }
}, false);

Chúng tôi có thể có được mọi thứ chúng tôi muốn bằng cách đưa vào một quy tắc kiểu và bằng cách chặn các sự kiện thu phóng:

$(function () {
  if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
  $(document.head).append(
    '<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
  )
  $(window).on('gesturestart touchmove', function (evt) {
    if (evt.originalEvent.scale !== 1) {
      evt.originalEvent.preventDefault()
      document.body.style.transform = 'scale(1)'
    }
  })
})

✔ Tắt thu phóng pinch.

✔ Tắt thu phóng hai lần.

✔ Cuộn không bị ảnh hưởng.

✔ Tắt tính năng tô sáng (được kích hoạt, trên iOS, theo quy tắc kiểu).

THÔNG BÁO: Tinh chỉnh phát hiện iOS theo ý thích của bạn. Thêm về điều đó ở đây .

Lời xin lỗi đến lukejackson và Piotr Kowalski , có câu trả lời xuất hiện dưới dạng sửa đổi trong đoạn mã trên.

Tôi đã đưa ra một giải pháp khá ngây thơ, nhưng nó có vẻ hiệu quả. Mục tiêu của tôi là ngăn chặn các cú đúp ngẫu nhiên được hiểu là phóng to, trong khi giữ cho độ chụm để thu phóng hoạt động cho khả năng tiếp cận.

Ý tưởng là đo thời gian giữa lần đầu tiên touchstartvà lần thứ hai touchendtrong một lần chạm hai lần và sau đó diễn giải lần cuối touchendlà nhấp chuột nếu độ trễ quá nhỏ. Trong khi ngăn chặn thu phóng ngẫu nhiên, phương pháp này dường như giữ cho danh sách cuộn không bị ảnh hưởng, điều này thật tuyệt. Không chắc chắn nếu tôi không bỏ lỡ bất cứ điều gì mặc dù.

let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;

document.addEventListener('touchstart', () => {
  preLastTouchStartAt = lastTouchStartAt;
  lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
  const touchEndAt = +new Date();
  if (touchEndAt - preLastTouchStartAt < delay) {
    event.preventDefault();
    event.target.click();
  }
});

Lấy cảm hứng từ một ý chính từ mutewinter và câu trả lời của Joseph .

Trong trường hợp cụ thể của tôi, tôi đang sử dụng Babylon.js để tạo cảnh 3D và toàn bộ trang của tôi bao gồm một khung hình toàn màn hình. Công cụ 3D có chức năng thu phóng riêng nhưng trên iOS, pinch-to-zoom can thiệp vào điều đó. Tôi đã cập nhật câu trả lời @Joseph để khắc phục vấn đề của mình. Để vô hiệu hóa nó, tôi nhận ra rằng tôi cần truyền {passive: false} làm tùy chọn cho người nghe sự kiện. Đoạn mã sau hoạt động với tôi:

window.addEventListener(
    "touchmove",
    function(event) {
        if (event.scale !== 1) {
            event.preventDefault();
        }
    },
    { passive: false }
);

Nghe có vẻ kỳ lạ, ít nhất là đối với Safari trong iOS 10.2, chạm hai lần để thu phóng bị vô hiệu hóa một cách kỳ diệu nếu thành phần của bạn hoặc bất kỳ tổ tiên nào của nó có một trong những điều sau đây:

1. Trình nghe onClick - nó có thể là một noop đơn giản.
2. Một cursor: pointerbộ trong CSS

Thu phóng không chủ ý có xu hướng xảy ra khi:

• Một người dùng chạm hai lần vào một thành phần của giao diện
• Một người dùng tương tác với chế độ xem bằng hai hoặc nhiều chữ số (pinch)

Để ngăn chặn hành vi chạm hai lần, tôi đã tìm thấy hai cách giải quyết rất đơn giản:

<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>

Cả hai điều này đều ngăn Safari (iOS 10.3.2) phóng to nút. Như bạn có thể thấy một cái chỉ là JavaScript, cái còn lại chỉ là CSS. Sử dụng hợp lý.

Đây là bản demo: https://codepen.io/lukejacksonn/pen/QMELXQ

Tôi đã không cố gắng ngăn chặn hành vi chèn ép (chủ yếu), vì tôi có xu hướng không tạo giao diện cảm ứng đa điểm cho web và thứ hai tôi đã làm tròn ý tưởng rằng có lẽ tất cả các giao diện bao gồm giao diện người dùng ứng dụng gốc phải là "pinch to zoom" -able ở những nơi. Tôi vẫn sẽ thiết kế để tránh người dùng phải làm điều này để làm cho giao diện người dùng của bạn có thể truy cập được bằng mọi giá.

Tìm thấy công việc đơn giản này xuất hiện để ngăn nhấp đúp để thu phóng:

    // Convert touchend events to click events to work around an IOS 10 feature which prevents
    // developers from using disabling double click touch zoom (which we don't want).
    document.addEventListener('touchend', function (event) {
        event.preventDefault();
        $(event.target).trigger('click');
    }, false);

Theo yêu cầu, tôi đã chuyển nhận xét của mình sang câu trả lời để mọi người có thể phản hồi lại:

Điều này hoạt động 90% thời gian cho iOS 13:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />

và

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

Tôi đã kiểm tra tất cả các câu trả lời trên trong thực tế với trang của mình trên iOS (iPhone 6, iOS 10.0.2), nhưng không thành công. Đây là giải pháp làm việc của tôi:

$(window).bind('gesturestart touchmove', function(event) {
    event = event.originalEvent || event;
    if (event.scale !== 1) {
         event.preventDefault();
         document.body.style.transform = 'scale(1)'
    }
});

điều này làm việc cho tôi:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);