Vô hiệu hóa Tự động thu phóng đầu vào Thẻ văn bản tiếng Việt - Safari trên iPhone

Tôi đã tạo một trang HTML có <input>thẻ type="text". Khi tôi nhấp vào nó bằng Safari trên iPhone, trang sẽ trở nên lớn hơn (tự động thu phóng). Có ai biết làm thế nào để vô hiệu hóa điều này?

Trình duyệt sẽ phóng to nếu kích thước phông chữ nhỏ hơn 16pxvà kích thước phông chữ mặc định cho các thành phần biểu mẫu là 11px(ít nhất là trong Chrome và Safari).

Ngoài ra, selectphần tử cần phải có lớp focusgiả được đính kèm.

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

Nó không cần thiết phải sử dụng tất cả các bên trên, bạn có thể chỉ là phong cách các yếu tố bạn cần, ví dụ như: chỉ text, numbervà textarea:

input[type='text'],
input[type='number'],
textarea {
  font-size: 16px;
}

Giải pháp thay thế để có các yếu tố đầu vào kế thừa từ kiểu cha:

body {
  font-size: 16px;
}
input[type="text"] {
  font-size: inherit;
}

Bạn có thể ngăn Safari tự động phóng to trên các trường văn bản trong quá trình nhập của người dùng mà không vô hiệu hóa khả năng thu phóng của người dùng. Chỉ cần thêm maximum-scale=1nhưng bỏ qua thuộc tính quy mô người dùng được đề xuất trong các câu trả lời khác.

Đây là một lựa chọn đáng giá nếu bạn có một biểu mẫu trong một lớp mà trôi nổi xung quanh nếu được phóng to, điều này có thể khiến các thành phần UI quan trọng di chuyển khỏi màn hình.

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

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}

Mới: IOS vẫn sẽ phóng to, trừ khi bạn sử dụng 16px cho đầu vào mà không lấy nét.

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

Tôi đã thêm một nền vì IOS không thêm nền vào phần chọn.

Nếu trang web của bạn được thiết kế phù hợp cho thiết bị di động, bạn có thể quyết định không cho phép mở rộng quy mô.

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

Điều này giải quyết vấn đề rằng trang hoặc biểu mẫu trên thiết bị di động của bạn sẽ 'nổi' xung quanh.

Tóm lại, câu trả lời là: đặt kích thước phông chữ của các thành phần biểu mẫu thành ít nhất 16px

input[type='text'],textarea {font-size:1em;}

Cách thích hợp để khắc phục sự cố này là thay đổi chế độ xem meta thành:

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

Không có cách nào tôi có thể tìm thấy, nhưng đây là một hack ...

1) Tôi nhận thấy rằng sự kiện di chuột xảy ra trước khi thu phóng, nhưng thu phóng xảy ra trước các sự kiện mousedown hoặc tiêu điểm.

2) Bạn có thể tự động thay đổi thẻ khung nhìn META bằng cách sử dụng javascript (xem Bật / tắt thu phóng trên iPhone safari bằng Javascript? )

Vì vậy, hãy thử điều này (thể hiện trong jquery cho sự gọn nhẹ):

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

Đây chắc chắn là một hack ... có thể có những tình huống di chuột lên / xuống không luôn luôn bắt các mục / thoát, nhưng nó hoạt động tốt trong các thử nghiệm của tôi và là một khởi đầu vững chắc.

Thêm user-scalable = 0 vào viewport meta như sau

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

Đã làm cho tôi :)

Gần đây tôi (hôm nay: D) đã phải tích hợp hành vi này. Để không ảnh hưởng đến các trường thiết kế ban đầu, bao gồm cả kết hợp, tôi đã chọn áp dụng chuyển đổi ở trọng tâm của trường:

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}

Như nhiều câu trả lời khác đã chỉ ra, điều này có thể đạt được bằng cách thêm maximum-scalevào viewportthẻ meta . Tuy nhiên, điều này có hậu quả tiêu cực là vô hiệu hóa thu phóng người dùng trên thiết bị Android . ( Nó không vô hiệu hóa thu phóng người dùng trên thiết bị iOS kể từ v10 .)

Chúng tôi có thể sử dụng JavaScript để tự động thêm maximum-scalevào meta viewportkhi thiết bị là iOS. Điều này đạt được điều tốt nhất của cả hai thế giới: chúng tôi cho phép người dùng phóng to và ngăn iOS phóng to các trường văn bản vào tiêu điểm.

| maximum-scale             | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes                       | yes           | yes                     | no                |
| no                        | yes           | no                      | yes               |
| yes on iOS, no on Android | yes           | yes                     | yes               |

Mã số:

const addMaximumScaleToMetaViewport = () => {
  const el = document.querySelector('meta[name=viewport]');

  if (el !== null) {
    let content = el.getAttribute('content');
    let re = /maximum\-scale=[0-9\.]+/g;

    if (re.test(content)) {
        content = content.replace(re, 'maximum-scale=1.0');
    } else {
        content = [content, 'maximum-scale=1.0'].join(', ')
    }

    el.setAttribute('content', content);
  }
};

const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;

// /programming/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
  /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (checkIsIOS()) {
  disableIosTextFieldZoom();
}

Javascript hack đang hoạt động trên iOS 7. Điều này dựa trên câu trả lời của @dlo nhưng các sự kiện rê chuột và rê chuột được thay thế bằng các sự kiện touchstart và touchend. Về cơ bản, tập lệnh này thêm thời gian chờ nửa giây trước khi thu phóng sẽ được bật lại để ngăn thu phóng.

$("input[type=text], textarea").on({ 'touchstart' : function() {
    zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
    setTimeout(zoomEnable, 500);
}});

function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
} 

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

input, textarea {
    font-size: initial;
}

Tôi đã sử dụng giải pháp của Christina ở trên, nhưng với một sửa đổi nhỏ cho bootstrap và một quy tắc khác để áp dụng cho máy tính để bàn. Kích thước phông chữ mặc định của Bootstrap là 14px, điều này gây ra sự thu phóng. Sau đây thay đổi thành 16px cho "điều khiển biểu mẫu" trong Bootstrap, ngăn thu phóng.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .form-control {
    font-size: 16px;
  }
}

Và trở lại 14px cho các trình duyệt không di động.

@media (min-width: 768px) {
  .form-control {
    font-size: 14px;
  }
}

Tôi đã thử sử dụng .form-control: Focus, để lại ở mức 14px ngoại trừ tiêu điểm đã thay đổi thành 16px và nó không khắc phục được vấn đề thu phóng với iOS8. Ít nhất trên iPhone của tôi sử dụng iOS8, kích thước phông chữ phải là 16px trước khi lấy nét để iPhone không phóng to trang.

Tôi đã làm điều này, cũng với jQuery:

$('input[type=search]').on('focus', function(){
  // replace CSS font-size with 16px to disable auto zoom on iOS
  $(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
  // put back the CSS font-size
  $(this).css('font-size', $(this).data('fontSize'));
});

Tất nhiên, một số yếu tố khác trong giao diện có thể phải được điều chỉnh nếu 16pxkích thước phông chữ này phá vỡ thiết kế.

Sau một thời gian cố gắng, tôi đã tìm ra giải pháp này

// set font-size to 16px to prevent zoom 
input.addEventListener("mousedown", function (e) {
  e.target.style.fontSize = "16px";
});

// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
  e.target.style.fontSize = "";
});

Trên "mousedown", nó đặt kích thước phông chữ của đầu vào thành 16px. Điều này sẽ ngăn việc phóng to. Trong sự kiện tập trung, nó thay đổi kích thước phông chữ trở lại giá trị ban đầu.

Không giống như các giải pháp được đăng trước đó, điều này sẽ cho phép bạn đặt kích thước phông chữ của đầu vào thành bất cứ điều gì bạn muốn.

Sau khi đọc hầu hết mọi dòng ở đây và thử nghiệm các giải pháp khác nhau, điều này là nhờ tất cả những người đã chia sẻ giải pháp của họ, những gì tôi đã đưa ra, thử nghiệm và làm việc cho tôi trên iPhone 7 iOS 10.x:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: initial;}
}
@media (min-width: 768px) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: inherit;}
}

Mặc dù vậy, nó có một số nhược điểm đáng chú ý là "nhảy" do sự thay đổi kích thước phông chữ nhanh xảy ra giữa trạng thái ed "hover" và "tập trung" - và tác động vẽ lại lên hiệu suất

Lấy cảm hứng từ câu trả lời của @jirikuchta, tôi đã giải quyết vấn đề này bằng cách thêm bit CSS này:

#myTextArea:active {
  font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}

Không có JS và tôi không nhận thấy bất kỳ đèn flash hay bất cứ thứ gì.

Điều đáng chú ý là a viewportwith maximum-scale=1cũng hoạt động, nhưng không phải khi trang được tải dưới dạng iframe hoặc nếu bạn có một số tập lệnh khác sửa đổi viewport, v.v.

Các phần tử giả như :focuskhông hoạt động như trước đây. Từ iOS 11, một tuyên bố thiết lập lại đơn giản có thể được thêm vào trước các kiểu chính của bạn (miễn là bạn không ghi đè lên chúng với kích thước phông chữ nhỏ hơn).

/* Prevent zoom */
select, input, textarea {
  font-size: 16px;
}

Điều đáng nói là đối với các thư viện CSS như Tachyons.css thì thật dễ dàng để ghi đè kích thước phông chữ của bạn.

Ví dụ lớp: f5tương đương với:fontSize: 1rem , sẽ ổn nếu bạn giữ tỷ lệ phông chữ cơ thể ở mặc định.

Tuy nhiên: nếu bạn chọn lớp cỡ chữ: f6điều này sẽ tương đương với fontSize: .875remtrên một màn hình nhỏ trở lên. Trong trường hợp đó, bạn sẽ cần phải cụ thể hơn về các khai báo thiết lập lại của mình:

  /* Prevent zoom */
  select, input, textarea {
    font-size: 16px!important;
  }

@media screen and (min-width: 30em) {

/* not small */

}

Nhân tiện, nếu bạn sử dụng Bootstrap , bạn chỉ có thể sử dụng biến thể này:

.form-control {
  font-size: 16px;
}

Tôi đã phải "khắc phục" sự cố tự động phóng to vào điều khiển biểu mẫu cho trang web của Đại học Hà Lan (sử dụng 15px trong điều khiển biểu mẫu). Tôi đã đưa ra một loạt các yêu cầu sau đây:

• người dùng vẫn phải có thể phóng to
• cỡ chữ phải giữ nguyên
• không có đèn flash của phong cách khác nhau tạm thời
• không yêu cầu jQuery
• phải hoạt động trên iOS mới nhất và không cản trở bất kỳ kết hợp hệ điều hành / thiết bị nào khác
• nếu có thể, không có thời gian chờ ma thuật, và nếu cần bộ hẹn giờ rõ ràng chính xác

Đây là những gì tôi đã đưa ra cho đến nay:

/*
NOTE: This code overrides the viewport settings, an improvement would be
      to take the original value and only add or change the user-scalable value
*/

// optionally only activate for iOS (done because I havn't tested the effect under other OS/devices combinations such as Android)
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS)
  preventZoomOnFocus();


function preventZoomOnFocus()
{
  document.documentElement.addEventListener("touchstart", onTouchStart);
  document.documentElement.addEventListener("focusin", onFocusIn);
}


let dont_disable_for = ["checkbox", "radio", "file", "button", "image", "submit", "reset", "hidden"];
//let disable_for = ["text", "search", "password", "email", "tel", "url", "number", "date", "datetime-local", "month", "year", "color"];


function onTouchStart(evt)
{
  let tn = evt.target.tagName;

  // No need to do anything if the initial target isn't a known element
  // which will cause a zoom upon receiving focus
  if (    tn != "SELECT"
      &&  tn != "TEXTAREA"
      && (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1)
     )
    return;

  // disable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=0");
}

// NOTE: for now assuming this focusIn is caused by user interaction
function onFocusIn(evt)
{
  // reenable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=1");
}

// add or update the <meta name="viewport"> element
function setViewport(newvalue)
{
  let vpnode = document.documentElement.querySelector('head meta[name="viewport"]');
  if (vpnode)
    vpnode.setAttribute("content",newvalue);
  else
  {
    vpnode = document.createElement("meta");
    vpnode.setAttribute("name", "viewport");
    vpnode.setAttribute("content", newvalue);
  }
}

Một số lưu ý:

• Lưu ý rằng cho đến nay tôi chỉ thử nghiệm nó trên iOS 11.3.1, nhưng sẽ sớm thử nghiệm nó trên một vài phiên bản khác
• Sử dụng tiêu điểm Trong các sự kiện có nghĩa là nó yêu cầu ít nhất iOS 5.1 (nhưng tôi thấy các trang web chúng tôi xây dựng hoạt động trong các phiên bản iOS cũ hơn 9 như một phần thưởng tuyệt vời)
• Sử dụng phân quyền sự kiện vì nhiều trang web tôi làm việc có các trang có thể tự động tạo các điều khiển biểu mẫu
• Đặt các eventListener thành phần tử html (documentEuity) để không phải chờ cơ thể sẵn sàng (không muốn kiểm tra xem tài liệu đã ở trạng thái sẵn sàng / được tải chưa hay cần chờ sự kiện DOMContentLoaded)

Thay vì chỉ đơn giản là đặt kích thước phông chữ thành 16px, bạn có thể:

1. Định kiểu trường nhập để nó lớn hơn kích thước dự định của nó, cho phép kích thước phông chữ logic được đặt thành 16px.
2. Sử dụng scale()biến đổi CSS và lề âm để thu nhỏ trường đầu vào xuống đúng kích thước.

Ví dụ: giả sử trường đầu vào của bạn ban đầu được tạo kiểu với:

input[type="text"] {
    border-radius: 5px;
    font-size: 12px;
    line-height: 20px;
    padding: 5px;
    width: 100%;
}

Nếu bạn phóng to trường bằng cách tăng tất cả các kích thước thêm 16/12 = 133,33%, sau đó giảm sử dụng scale()12/16 = 75%, trường đầu vào sẽ có kích thước hình ảnh chính xác (và kích thước phông chữ) và sẽ không thu phóng tiêu điểm.

Vì scale()chỉ ảnh hưởng đến kích thước hình ảnh, bạn cũng sẽ cần thêm các lề âm để giảm kích thước logic của trường.

Với CSS này:

input[type="text"] {
    /* enlarge by 16/12 = 133.33% */
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;

    /* scale down by 12/16 = 75% */
    transform: scale(0.75);
    transform-origin: left top;

    /* remove extra white space */
    margin-bottom: -10px;
    margin-right: -33.333333333%;
}

trường nhập liệu sẽ có kích thước phông chữ logic là 16px trong khi dường như có văn bản 12px.

Tôi có một bài đăng blog nơi tôi đi vào chi tiết hơn một chút và có ví dụ này dưới dạng HTML có thể xem được:
Không thu phóng đầu vào trong Safari trên iPhone, cách hoàn hảo pixel

Ngay cả với những câu trả lời này, tôi đã mất ba ngày để tìm hiểu chuyện gì đang xảy ra và tôi có thể cần giải pháp một lần nữa trong tương lai.

Tình hình của tôi hơi khác so với mô tả.

Trong tôi, tôi đã có một số văn bản có thể nội dung trong một div trên trang. Khi người dùng nhấp vào div KHÁC BIỆT, một nút sắp xếp, tôi sẽ tự động chọn một số văn bản trong div có thể điều chỉnh được (một phạm vi lựa chọn đã được lưu và xóa trước đó), chạy một văn bản phong phú execCommand trên lựa chọn đó và xóa lại nó.

Điều này cho phép tôi thay đổi màu văn bản một cách vô hình dựa trên tương tác của người dùng với các div màu ở nơi khác trên trang, trong khi vẫn giữ lựa chọn thường ẩn để cho họ thấy màu trong ngữ cảnh phù hợp.

Chà, trên Safari của iPad, nhấp vào div màu dẫn đến bàn phím trên màn hình sắp xuất hiện và tôi không làm gì để ngăn chặn điều đó.

Cuối cùng tôi đã tìm ra cách iPad làm điều này.

Nó lắng nghe một chuỗi touchstart và touchend kích hoạt lựa chọn văn bản có thể chỉnh sửa.

Khi sự kết hợp đó xảy ra, nó sẽ hiển thị bàn phím trên màn hình.

Trên thực tế, nó thực hiện phóng to thu nhỏ trong đó nó mở rộng trang bên dưới trong khi phóng to văn bản có thể chỉnh sửa. Tôi phải mất một ngày chỉ để hiểu những gì tôi đang nhìn thấy.

Vì vậy, giải pháp tôi đã sử dụng là chặn cả touchstart và touchend trên các div màu cụ thể đó. Trong cả hai trình xử lý, tôi ngừng truyền và tạo bọt và trả về false. Nhưng trong sự kiện touchend, tôi kích hoạt hành vi tương tự kích hoạt nhấp chuột.

Vì vậy, trước đây, Safari đã kích hoạt những gì tôi nghĩ là "touchstart", "mousedown", "touchend", "mouseup", "click" và vì mã của tôi, một lựa chọn văn bản, theo thứ tự đó.

Trình tự mới vì các phần chặn chỉ đơn giản là lựa chọn văn bản. Mọi thứ khác bị chặn trước khi Safari có thể xử lý và thực hiện công cụ bàn phím của nó. Touchstart và touchend chặn cũng ngăn chặn các sự kiện chuột kích hoạt, và trong bối cảnh điều này là hoàn toàn tốt.

Tôi không biết một cách dễ dàng hơn để mô tả điều này nhưng tôi nghĩ rằng điều quan trọng là phải có nó ở đây bởi vì tôi đã tìm thấy chủ đề này trong vòng một giờ kể từ lần đầu tiên gặp phải vấn đề.

Tôi chắc chắn 98% sửa chữa tương tự sẽ hoạt động với các hộp đầu vào và bất cứ điều gì khác. Chặn các sự kiện chạm và xử lý chúng một cách riêng biệt mà không để chúng lan truyền hoặc bong bóng và xem xét thực hiện bất kỳ lựa chọn nào sau một khoảng thời gian nhỏ chỉ để đảm bảo Safari không nhận ra chuỗi là trình kích hoạt bàn phím.

Tôi thấy mọi người ở đây thực hiện một số nội dung lạ với JavaScript hoặc chức năng chế độ xem và tắt tất cả thu phóng thủ công trên thiết bị. Đó không phải là một giải pháp theo ý kiến ​​của tôi. Thêm đoạn mã CSS này sẽ tắt tự động thu phóng trong iOS mà không thay đổi kích thước phông chữ của bạn thành một số cố định như 16px.

Theo mặc định, tôi sử dụng cỡ chữ 93,8% (15px) tại các trường đầu vào và bằng cách thêm đoạn mã CSS của tôi, tỷ lệ này vẫn giữ ở mức 93,8%. Không cần phải thay đổi thành 16px hoặc biến nó thành một số cố định.

input[type="text"]:focus,
textarea:focus {
    -webkit-text-size-adjust: 100%;
}

Đặt kích thước phông chữ (cho các trường đầu vào) bằng với kích thước phông chữ của cơ thể, dường như là điều ngăn trình duyệt thu nhỏ hoặc thu nhỏ. Tôi khuyên bạn nên sử dụng font-size: 1remnhư một giải pháp thanh lịch hơn.

Vì tính năng phóng to tự động (không có thu nhỏ) vẫn đang được chú thích trên iPhone, đây là một JavaScript dựa trên đề xuất của dlo hoạt động với tiêu cự / mờ.

Thu phóng bị vô hiệu hóa ngay khi đầu vào văn bản được kết hợp và bật lại khi đầu vào còn lại.

Lưu ý: Một số người dùng không thể chấp nhận chỉnh sửa văn bản trong một kiểu nhập văn bản nhỏ! Do đó, cá nhân tôi thích thay đổi kích thước văn bản của đầu vào trong khi chỉnh sửa (xem mã bên dưới).

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function onBeforeZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "user-scalable=0";
    }
}
function onAfterZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "width=device-width, user-scalable=1";
    }
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

Đoạn mã sau sẽ thay đổi kích thước văn bản của đầu vào thành 16 pixel (được tính, nghĩa là ở kích thước thu phóng hiện tại) trong khi phần tử có tiêu điểm. Do đó, iPhone sẽ không tự động phóng to.

Lưu ý: Hệ số thu phóng được tính dựa trên màn hình của window.innerWidth và iPhone với 320 pixel. Điều này sẽ chỉ có hiệu lực cho iPhone ở chế độ dọc.

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function getSender(evt, local) {
    if (!evt) {
        evt = window.event;
    }
    var sender;
    if (evt.srcElement) {
        sender = evt.srcElement;
    } else {
        sender = local;
    }
    return sender;
}
function onBeforeZoom(evt) {
    var zoom = 320 / window.innerWidth;
    var element = getSender(evt);
    element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
    var element = getSender(evt);
    element.style.fontSize = "";
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

Phải mất một thời gian tôi mới tìm thấy nó nhưng đây là mã tốt nhất mà tôi tìm thấy ...... http://nerd.vasilis.nl/prevent-ios-from-zooming-onf Focus /

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' +        (event.type == 'blur' ? 10 : 1));
});

Dựa trên câu trả lời của Stephen Walsh ... Mã này hoạt động mà không thay đổi kích thước phông chữ của tiêu điểm (trông có vẻ khập khiễng), cộng với nó vẫn hoạt động với FastClick , tôi khuyên bạn nên thêm vào tất cả các trang web di động để giúp mang lại "tính linh hoạt". Điều chỉnh "chiều rộng khung nhìn" của bạn cho phù hợp với nhu cầu của bạn.

// disable autozoom when input is focused
    var $viewportMeta = $('head > meta[name="viewport"]');
    $('input, select, textarea').bind('touchend', function(event) {
        $viewportMeta.attr('content', 'width=640, user-scalable=0');
        setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1)
    });

Một nhận xét cho câu trả lời hàng đầu về việc đặt kích thước phông chữ thành 16px hỏi đó là giải pháp như thế nào, nếu bạn muốn phông chữ lớn hơn / nhỏ hơn.

Tôi không biết về tất cả các bạn, nhưng sử dụng px cho kích thước phông chữ không phải là cách tốt nhất, bạn nên sử dụng em.

Tôi gặp vấn đề này trên trang web phản hồi của mình, nơi trường văn bản của tôi lớn hơn 16 pixel. Tôi đã đặt bộ chứa biểu mẫu của mình thành 2rem và trường nhập liệu của tôi được đặt thành 1.4em. Trong các truy vấn di động của tôi, tôi thay đổi kích thước phông chữ html tùy thuộc vào chế độ xem. Vì html mặc định là 10, trường nhập của tôi tính đến 28px trên màn hình

Để xóa tự động thu phóng, tôi phải thay đổi đầu vào của mình thành 1.6em. Điều này đã tăng kích thước phông chữ của tôi lên 32px. Chỉ cao hơn một chút và hầu như không đáng chú ý. Trên iPhone 4 & 5 của tôi, tôi thay đổi kích thước phông chữ html của mình thành 15px cho dọc và trở lại 10px cho ngang. Dường như điểm ngọt ngào cho kích thước pixel đó là 48px, đó là lý do tại sao tôi thay đổi từ 1.4em (42px) thành 1.6em (48px).

Điều bạn cần làm là tìm điểm ngọt trên cỡ chữ và sau đó chuyển đổi ngược lại theo kích cỡ rem / em.

Đây là một hack tôi đã sử dụng cho một trong các dự án của tôi:

select {
    font-size: 2.6rem; // 1rem = 10px
    ...
    transform-origin: ... ...;
    transform: scale(0.5) ...;
}

Kết thúc với các kiểu và tỷ lệ ban đầu tôi muốn nhưng không phóng to tiêu cự.