Làm cách nào để tắt chế độ xem phóng to trên Mobile Safari?

Tôi đã thử cả ba thứ này đều vô ích:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

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

mỗi giá trị khác nhau tôi tìm thấy được đề xuất bởi tìm kiếm google hoặc tìm kiếm SO, nhưng không có giá trị ' user-scalable = X ' nào có vẻ hoạt động

Tôi cũng đã thử dấu phẩy phân định các giá trị thay vì dấu chấm phẩy, không có may mắn. Sau đó, tôi đã cố gắng CHỈ có user-scalablegiá trị hiện tại, vẫn không có may mắn.

CẬP NHẬT

Có cái này từ trang của Apple và nó hoạt động:

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

Hóa ra vấn đề là các trích dẫn không chuẩn vì tôi đã sao chép thẻ meta từ một trang web đang sử dụng chúng, rất tiếc

Mã của bạn đang hiển thị dấu ngoặc kép thuộc tính như dấu ngoặc kép lạ mắt. Nếu các trích dẫn ưa thích có mặt trong mã nguồn thực tế của bạn, tôi sẽ đoán đó là vấn đề.

Điều này hoạt động với tôi trên Mobile Safari trong iOS 4.2.

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

Đối với những người tìm kiếm giải pháp iOS 10, user-scaleable=nobị vô hiệu hóa trong Safari cho iOS 10. Lý do là Apple đang cố gắng cải thiện khả năng truy cập bằng cách cho phép mọi người phóng to các trang web.

Từ ghi chú phát hành :

Để 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 trang web đặt user-scalable = no trong chế độ xem.

Theo như tôi hiểu, chúng ta sẽ gặp may.

@mattis là chính xác rằng Safari 10 iOS sẽ không cho phép bạn vô hiệu hóa độ chụm để thu phóng với thuộc tính có thể mở rộng của người dùng. Tuy nhiên, tôi đã nhận được nó để vô hiệu hóa bằng cách sử dụng ngăn chặn Default trong sự kiện 'cử chỉ'. Tôi chỉ xác minh điều này trên Safari trong iOS 10.0.2.

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

đối với iphones safari lên đến iOS 10 "khung nhìn" không phải là một giải pháp, tôi không thích cách này, nhưng tôi đã sử dụng mã javascript này và nó đã giúp tôi

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

user-scalable=0

Điều này không còn hoạt động trên iOS 10. Apple đã loại bỏ tính năng này.

Hiện tại không có cách nào bạn có thể vô hiệu hóa trang web thu phóng trên iOS, trừ khi bạn tạo ứng dụng nền tảng thô.

Hãy thử thêm các mục sau vào thẻ đầu của bạn:

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

Ngoài ra

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

Cuối cùng, dưới dạng thuộc tính style hoặc trong tệp css của bạn, hãy thêm văn bản sau cho Trình duyệt dựa trên webkit:

html {
    -webkit-text-size-adjust: none
}

Tôi đã làm cho nó hoạt động trong iOS 12 với mã sau:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

Với câu lệnh if đầu tiên tôi đảm bảo nó sẽ chỉ thực thi trong môi trường iOS (nếu nó thực thi trong Android thì hành vi cuộn sẽ bị hỏng). Ngoài ra, lưu ý passivetùy chọn được đặt thành false.

Điều này hoạt động tốt trong iOS 10.3.2

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

cảm ơn bạn @arthur và @aleclarson

Tôi đã quản lý để ngăn chặn hành vi này bằng cách thêm phần sau vào tiêu đề HTML. Điều này hoạt động trên các thiết bị di động, vì trình duyệt máy tính để bàn hỗ trợ thu phóng khi sử dụng bánh xe chuột. Nó không phải là một vấn đề lớn trên các trình duyệt máy tính để bàn nhưng điều quan trọng là phải tính đến điều này.

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

và quy tắc sau đây cho biểu định kiểu CSS

html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}

đôi khi những chỉ thị khác trong contentthẻ có thể làm rối tung dự đoán / phỏng đoán tốt nhất của Apple về cách bố trí trang của bạn, tất cả những gì bạn cần để tắt thu phóng pinch là.

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

Trong Safari 9.0 trở lên, bạn có thể sử dụng thẻ meta thu nhỏ để vừa với khung nhìn như hình bên dưới

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Tôi dại dột có một div trình bao bọc có chiều rộng được đo bằng pixel. Các trình duyệt khác dường như đủ thông minh để đối phó với điều này. Khi tôi đã chuyển đổi độ rộng thành giá trị phần trăm, nó cũng hoạt động tốt trên thiết bị di động Safari. Rất phiền phức.

.page{width: 960px;}

đến

.page{width:93.75%}

<div id="divPage" class="page">
</div>

Sử dụng thuộc tính CSS touch-actionlà giải pháp thanh lịch nhất. Đã thử nghiệm trên iOS 13,5.

Để tắt các cử chỉ thu phóng pinch và nhấn đúp để thu phóng:

body {
  touch-action: pan-x pan-y;
}

Nếu ứng dụng của bạn cũng không có nhu cầu di chuyển , tức là cuộn, hãy sử dụng:

body {
  touch-action: none;
}

Để tuân thủ các yêu cầu về khả năng truy cập của WAI WCAG 2.0 AA, bạn không bao giờ phải vô hiệu hóa thu phóng pinch. (WCAG 2.0: SC 1.4.4 Thay đổi kích thước văn bản Cấp độ AA). Bạn có thể đọc thêm về nó ở đây: Khả năng truy cập trên thiết bị di động: Cách thức WCAG 2.0 và các hướng dẫn W3C / WAI khác áp dụng cho thiết bị di động, Thu phóng / phóng to 2.2

Điều này nên được làm việc trên iphone, vv

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