Ngăn chặn zoom (pinch-to-zoom) trên iPhone Web App bằng HTML Meta Tag

• iOS 10+ bỏ qua user-scalable=no và maximum-scale nếu user bật "Zoom" trong Accessibility settings.
• Chrome Android cũng bỏ qua từ phiên bản 2017.
• Chỉ còn hiệu lực trên iOS cũ hoặc webview app không bật accessibility zoom.

Giải pháp thay thế: Ngăn zoom CHỈ trên input/select (Khuyên dùng)

iOS Safari tự zoom khi focus vào <input>, <select> nếu font-size < 16px. Fix bằng CSS:

input, select, textarea {
  font-size: 16px !important; /* Ngăn auto-zoom trên iOS */
}

/* Hoặc media query chính xác cho iPhone */
@media screen and (max-width: 767px) {
  input, select, textarea {
    font-size: 16px;
  }
}

Ví dụ: Chỉ ngăn zoom trên form, cho zoom trên content

<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Không disable zoom -->

<style>
  /* Chỉ input/select font-size >= 16px */
  @media (max-width: 767px) {
    input, select, textarea { font-size: 16px; }
  }
  
  /* Nếu BẮT BUỘC phải disable zoom cho app game/canvas fullscreen */
  .no-zoom {
    touch-action: manipulation; /* Ngăn double-tap zoom trên touch */
  }
</style>

touch-action: manipulation

Thuộc tính CSS hiện đại để kiểm soát touch behavior:

.canvas-game {
  touch-action: none;        /* Ngăn tất cả gesture (pan, zoom, scroll) */
  /* Hoặc */
  touch-action: manipulation; /* Chỉ cho phép pan/scroll, ngăn double-tap zoom */
}

Tóm tắt khuyến nghị