ปิดใช้งานซูมอัตโนมัติในแท็ก“ ข้อความ” อินพุต - Safari บน iPhone

ฉันทำเพจ HTML ที่มีแท็ก<input> type="text"เมื่อฉันคลิกโดยใช้ Safari บน iPhone หน้าจะใหญ่ขึ้น (ซูมอัตโนมัติ) ไม่มีใครรู้วิธีปิดการใช้งานนี้หรือไม่

เบราว์เซอร์จะซูมหากขนาดตัวอักษรน้อยกว่า16pxและขนาดแบบอักษรเริ่มต้นสำหรับองค์ประกอบแบบฟอร์มคือ11px(อย่างน้อยใน Chrome และ Safari)

นอกจากนี้selectองค์ประกอบต้องมีการfocusแนบคลาสหลอก

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;
}

ก็ไม่จำเป็นที่จะใช้ทั้งหมดข้างต้นคุณสามารถเพียงแค่องค์ประกอบสไตล์ที่คุณต้องการเช่น: เพียงtext, numberและtextarea:

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

โซลูชันทางเลือกเพื่อให้อิลิเมนต์อินพุตสืบทอดจากสไตล์พาเรนต์:

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

คุณสามารถป้องกันไม่ให้ Safari ซูมเข้าโดยอัตโนมัติในช่องข้อความระหว่างการป้อนข้อมูลของผู้ใช้โดยไม่ปิดการใช้งานความสามารถของผู้ใช้ในการบีบนิ้ว เพียงเพิ่มmaximum-scale=1แต่ไม่แสดงแอตทริบิวต์ของผู้ใช้ที่แนะนำไว้ในคำตอบอื่น ๆ

มันเป็นตัวเลือกที่คุ้มค่าถ้าคุณมีแบบฟอร์มในเลเยอร์ที่ "ลอย" ไปมาหากซูมซึ่งอาจทำให้องค์ประกอบ UI สำคัญย้ายออกจากหน้าจอ

<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;
  }
}

ใหม่: IOS จะยังคงซูมเว้นแต่คุณจะใช้ 16px กับอินพุตโดยไม่มีโฟกัส

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

ฉันเพิ่มพื้นหลังเนื่องจาก IOS ไม่เพิ่มพื้นหลังในตัวเลือก

หากเว็บไซต์ของคุณได้รับการออกแบบอย่างเหมาะสมสำหรับอุปกรณ์พกพาคุณสามารถตัดสินใจว่าจะไม่อนุญาตให้ปรับขนาด

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

วิธีนี้จะช่วยแก้ปัญหาที่หน้าหรือแบบฟอร์มมือถือของคุณกำลังจะ 'ลอย' ไปรอบ ๆ

โดยสรุปคำตอบคือ: ตั้งค่าขนาดตัวอักษรขององค์ประกอบแบบฟอร์มเป็นอย่างน้อย 16px

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

วิธีที่เหมาะสมในการแก้ไขปัญหานี้คือเปลี่ยนเมตาวิวพอร์ตเป็น:

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

ไม่มีวิธีที่สะอาดที่ฉันสามารถหาได้ แต่นี่คือแฮ็ค ...

1) ฉันสังเกตเห็นว่าเหตุการณ์การวางเมาส์เกิดขึ้นก่อนการซูม แต่การซูมจะเกิดขึ้นก่อนเหตุการณ์ที่วางเมาส์หรือโฟกัส

2) คุณสามารถเปลี่ยนแท็กวิวพอร์ต META แบบไดนามิกโดยใช้ javascript (ดูที่เปิดใช้งาน / ปิดใช้งานการซูมบนซาฟารี iPhone ด้วย Javascript หรือไม่ )

ดังนั้นลองนี้ (แสดงใน jquery เพื่อความกะทัดรัด):

$("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" />');
}

นี่เป็นแฮ็คอย่างแน่นอน ... อาจมีบางสถานการณ์ที่เม้าส์โอเวอร์ครอส / ไม่ลงรายการ / ออก แต่มันก็ทำงานได้ดีในการทดสอบของฉันและเป็นการเริ่มต้นที่ดี

เพิ่มuser-scalable = 0ให้กับ viewport meta ดังต่อไปนี้

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

ทำงานให้ฉัน :)

ฉันเมื่อเร็ว ๆ นี้ (วันนี้: D) ต้องรวมพฤติกรรมนี้ เพื่อไม่ให้กระทบกับฟิลด์การออกแบบดั้งเดิมรวมถึงคอมโบฉันเลือกที่จะใช้การแปลงที่โฟกัสของฟิลด์:

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

เนื่องจากมีคำตอบอื่น ๆ อีกมากมายที่ชี้ให้เห็นแล้วสามารถทำได้โดยเพิ่มmaximum-scaleเมตาviewportแท็ก อย่างไรก็ตามเรื่องนี้มีผลกระทบเชิงลบของการปิดใช้งานการซูมของผู้ใช้บนอุปกรณ์ Android ( มันไม่ได้ปิดการใช้งานการซูมผู้ใช้บนอุปกรณ์ iOS ตั้งแต่ v10 )

เราสามารถใช้จาวาสคริปต์เพื่อเพิ่มmaximum-scaleเมตาดาต้าแบบไดนามิกviewportเมื่ออุปกรณ์เป็น iOS สิ่งนี้บรรลุผลที่ดีที่สุดทั้งสองโลก: เราอนุญาตให้ผู้ใช้ซูมและป้องกันไม่ให้ iOS ซูมเข้าไปในช่องข้อความที่โฟกัส

| 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               |

รหัส:

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 ซึ่งทำงานบน iOS 7 นี้เป็นไปตามคำตอบของ @dlo แต่เหตุการณ์ mouseover และ mouseout จะถูกแทนที่ด้วย touchstart และ touchend events โดยพื้นฐานแล้วสคริปต์นี้เพิ่มการหมดเวลาครึ่งวินาทีก่อนที่การซูมจะเปิดใช้งานอีกครั้งเพื่อป้องกันการซูม

$("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" />');
} 

สิ่งนี้ใช้ได้กับฉัน:

input, textarea {
    font-size: initial;
}

ฉันใช้โซลูชันของ Christina ด้านบน แต่มีการปรับเปลี่ยนเล็กน้อยสำหรับ bootstrap และกฎอื่นเพื่อใช้กับคอมพิวเตอร์เดสก์ท็อป ขนาดแบบอักษรเริ่มต้นของ Bootstrap คือ 14px ซึ่งเป็นสาเหตุของการซูม ต่อไปนี้เปลี่ยนเป็น 16px สำหรับ "การควบคุมแบบฟอร์ม" ใน Bootstrap เพื่อป้องกันการซูม

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

และกลับไปที่ 14px สำหรับเบราว์เซอร์ที่ไม่ใช่สำหรับมือถือ

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

ฉันลองใช้. form-control: focus ซึ่งปล่อยไว้ที่ 14px ยกเว้นการโฟกัสที่เปลี่ยนเป็น 16px และไม่ได้แก้ไขปัญหาการซูมด้วย iOS8 อย่างน้อยใน iPhone ของฉันที่ใช้ iOS8 ขนาดตัวอักษรต้องเป็น 16px ก่อนที่จะโฟกัสเพื่อให้ iPhone ไม่ซูมหน้า

ฉันทำสิ่งนี้ด้วย 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'));
});

แน่นอนองค์ประกอบอื่น ๆ ในอินเทอร์เฟซอาจต้องปรับถ้า16pxแบบอักษรขนาดนี้แบ่งการออกแบบ

หลังจากที่ในขณะที่พยายามฉันมาด้วยวิธีนี้

// 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 = "";
});

บน "mousedown" มันตั้งค่าขนาดตัวอักษรของอินพุตเป็น 16px สิ่งนี้จะป้องกันการซูม เมื่อมีการโฟกัสเหตุการณ์มันจะเปลี่ยนขนาดตัวอักษรกลับไปเป็นค่าเริ่มต้น

ซึ่งแตกต่างจากโซลูชันที่โพสต์ก่อนหน้านี้จะช่วยให้คุณกำหนดขนาดแบบอักษรของอินพุตเป็นสิ่งที่คุณต้องการ

หลังจากอ่านเกือบทุกบรรทัดที่นี่และทดสอบวิธีแก้ปัญหาต่าง ๆ นี่คือขอบคุณทุกคนที่แบ่งปันโซลูชันของพวกเขาสิ่งที่ฉันคิดขึ้นมาทดสอบและใช้งานได้กับฉันใน 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;}
}

มันมีข้อเสียบ้างอย่างเห็นได้ชัด "กระโดด" อันเป็นผลมาจากการเปลี่ยนขนาดตัวอักษรอย่างรวดเร็วที่เกิดขึ้นระหว่างรัฐ "โฮเวอร์" เอ็ดและ "โฟกัส" เอ็ด - และผลกระทบวาดใหม่เกี่ยวกับประสิทธิภาพ

แรงบันดาลใจจากคำตอบของ @jirikuchta ฉันแก้ไขปัญหานี้ได้โดยการเพิ่ม CSS บิตนี้:

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

ไม่ใช่ JS และฉันไม่สังเกตเห็นแฟลชหรืออะไรเลย

เป็นเรื่องที่น่าสังเกตว่า a viewportด้วยmaximum-scale=1ยังใช้งานได้ แต่ไม่ใช่เมื่อโหลดหน้าเว็บเป็น iframe หรือหากคุณมีสคริปต์อื่น ๆ ที่ปรับเปลี่ยนviewportเป็นต้น

องค์ประกอบที่หลอกเช่น:focusไม่ทำงานตามที่เคย จาก iOS 11 การประกาศการรีเซ็ตแบบง่ายสามารถเพิ่มได้ก่อนสไตล์หลักของคุณ (โดยที่คุณไม่ต้องแทนที่ด้วยขนาดตัวอักษรที่เล็กกว่า)

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

เป็นมูลค่าการกล่าวขวัญว่าสำหรับห้องสมุด CSS เช่น Tachyons.css แล้วมันง่ายที่จะแทนที่ขนาดตัวอักษรของคุณโดยไม่ตั้งใจ

ตัวอย่างเช่นคลาส: f5เทียบเท่ากับ:fontSize: 1remซึ่งก็ดีถ้าคุณยังคงขนาดตัวอักษรไว้เป็นค่าเริ่มต้น

อย่างไรก็ตาม: หากคุณเลือกคลาสขนาดตัวอักษร: f6สิ่งนี้จะเทียบเท่าfontSize: .875remกับการแสดงผลขนาดเล็กขึ้นไป ในตัวอย่างนั้นคุณจะต้องเจาะจงมากขึ้นเกี่ยวกับการแจ้งการรีเซ็ตของคุณ:

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

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

/* not small */

}

โดยวิธีการถ้าคุณใช้Bootstrapคุณก็สามารถใช้ตัวแปรนี้:

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

ฉันต้อง "แก้ไข" การย่อ / ขยายอัตโนมัติเป็นปัญหาการควบคุมแบบฟอร์มสำหรับเว็บไซต์ Dutch University (ซึ่งใช้ 15px ในการควบคุมฟอร์ม) ฉันคิดข้อกำหนดต่อไปนี้ขึ้นมา:

• ผู้ใช้จะต้องสามารถซูมเข้าได้
• ขนาดตัวอักษรจะต้องยังคงเหมือนเดิม
• ไม่มีแฟลชในการกำหนดสไตล์ที่แตกต่างชั่วคราว
• ไม่มีข้อกำหนด jQuery
• ต้องทำงานบน iOS ใหม่ล่าสุดและไม่ขัดขวางการรวมกันของ OS / อุปกรณ์อื่น ๆ
• ถ้าเป็นไปได้ไม่มีการหมดเวลาเวทย์มนตร์และถ้าจำเป็นต้องล้างตัวจับเวลาอย่างถูกต้อง

นี่คือสิ่งที่ฉันเกิดขึ้นด้วย:

/*
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);
  }
}

หมายเหตุบางส่วน:

• โปรดทราบว่าจนถึงตอนนี้ฉันเพิ่งทดสอบบน iOS 11.3.1 แต่จะทดสอบกับรุ่นอื่น ๆ ในไม่ช้า
• การใช้ focusIn events หมายถึงมันต้องการ iOS 5.1 เป็นอย่างน้อย (แต่ฉันเห็นเว็บไซต์ที่เราสร้างใน iOS เวอร์ชันเก่ากว่า 9 เป็นโบนัสเด็ด ๆ )
• การใช้การมอบหมายเหตุการณ์เพราะเว็บไซต์จำนวนมากที่ฉันทำงานมีหน้าซึ่งอาจสร้างการควบคุมฟอร์มแบบไดนามิก
• การตั้งค่า eventListeners เป็นองค์ประกอบ html (documentElement) เพื่อไม่ต้องรอให้เนื้อความพร้อมใช้งาน (ไม่ต้องการตรวจสอบว่าเอกสารมีสถานะพร้อม / โหลดหรือต้องการรอเหตุการณ์ DOMContentLoaded)

แทนที่จะตั้งค่าขนาดแบบอักษรเป็น 16px คุณสามารถ:

1. จัดรูปแบบฟิลด์อินพุตเพื่อให้มีขนาดใหญ่กว่าขนาดที่ต้องการทำให้สามารถกำหนดขนาดฟอนต์แบบโลจิคัลเป็น 16px
2. ใช้การscale()แปลง CSSและระยะขอบลบเพื่อลดขนาดฟิลด์อินพุตให้มีขนาดที่ถูกต้อง

ตัวอย่างเช่นสมมติว่าฟิลด์อินพุตของคุณมีสไตล์ในตอนแรกด้วย:

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

หากคุณขยายฟิลด์ด้วยการเพิ่มมิติทั้งหมด 16/12 = 133.33% จากนั้นลดการใช้ 12/16 scale()= 75% ฟิลด์อินพุตจะมีขนาดภาพที่ถูกต้อง (และขนาดตัวอักษร) และจะไม่มีการซูม โฟกัส

เช่นscale()เดียวกับขนาดภาพที่เห็นคุณจะต้องเพิ่มระยะขอบติดลบเพื่อลดขนาดตรรกะของฟิลด์

ด้วย CSS นี้:

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%;
}

ฟิลด์อินพุตจะมีขนาดแบบอักษรโลจิคัลเป็น 16px ขณะที่ปรากฏเป็นข้อความ 12px

ฉันมีโพสต์บล็อกที่ฉันเข้าไปดูรายละเอียดเพิ่มเติมเล็กน้อยและมีตัวอย่างนี้เป็น HTML ที่ดูได้:
ไม่มีการซูมเข้าใน Safari บน iPhone, พิกเซลสมบูรณ์แบบ

แม้จะมีคำตอบเหล่านี้ฉันใช้เวลาสามวันในการหาว่าเกิดอะไรขึ้นและฉันอาจต้องการวิธีแก้ปัญหาอีกในอนาคต

สถานการณ์ของฉันแตกต่างจากที่อธิบายไว้เล็กน้อย

ในของฉันฉันมีข้อความที่น่าพึงพอใจใน div บนหน้าเว็บ เมื่อผู้ใช้คลิก DIFFERENT div ปุ่มแปลก ๆ ฉันเลือกข้อความบางส่วนโดยอัตโนมัติใน contenteditable div (ช่วงการเลือกที่ได้รับการบันทึกและลบก่อนหน้านี้) เรียกใช้ rich text exec เลือกคำสั่งนั้นแล้วล้างอีกครั้ง

สิ่งนี้ทำให้ฉันสามารถเปลี่ยนสีของตัวอักษรอย่างเห็นได้ชัดโดยขึ้นอยู่กับการโต้ตอบของผู้ใช้กับ divs สีอื่น ๆ ในหน้าขณะที่ยังคงซ่อนตัวเลือกไว้ตามปกติเพื่อให้พวกเขาเห็นสีในบริบทที่เหมาะสม

ใน Safari ของ iPad การคลิกปุ่มสีทำให้คีย์บอร์ดบนหน้าจอแสดงขึ้นมาและไม่มีอะไรที่ฉันจะป้องกันได้

ในที่สุดฉันก็พบว่า iPad กำลังทำสิ่งนี้อย่างไร

มันฟังลำดับเริ่มต้นและสัมผัสที่ก่อให้เกิดการเลือกของข้อความที่แก้ไขได้

เมื่อมีการรวมกันเกิดขึ้นมันจะแสดงแป้นพิมพ์บนหน้าจอ

ที่จริงแล้วมันเป็นการซูมดอลลี่ที่มันจะขยายหน้าต้นแบบในขณะที่ซูมเข้ากับข้อความที่แก้ไขได้ ฉันใช้เวลาหนึ่งวันเพื่อทำความเข้าใจกับสิ่งที่ฉันเห็น

ดังนั้นวิธีที่ฉันใช้คือการสกัดกั้นทั้งการเริ่มต้นและการสัมผัสกับ divs สีเหล่านั้น ในตัวจัดการทั้งสองฉันหยุดการแพร่กระจายและเดือดปุด ๆ และกลับเท็จ แต่ในเหตุการณ์ touchend ฉันเรียกใช้ลักษณะการทำงานเดียวกันกับที่คลิกเรียก

ดังนั้นก่อนหน้านี้ Safari ได้เรียกสิ่งที่ฉันคิดว่าเป็น "touchstart", "mousedown", "touchend", "mouseup", "คลิก" และเนื่องจากรหัสของฉันการเลือกข้อความตามลำดับนั้น

ลำดับใหม่เนื่องจากการสกัดกั้นเป็นเพียงการเลือกข้อความ ทุกอย่างอื่นจะถูกดักก่อนที่ Safari จะสามารถประมวลผลและทำสิ่งต่าง ๆ บนคีย์บอร์ด touchstart และ touchend intercepts จะป้องกันเหตุการณ์เมาส์จากการทริกเกอร์เช่นกันและในบริบทนี้ก็ใช้ได้ดี

ฉันไม่ทราบวิธีที่ง่ายกว่าในการอธิบายสิ่งนี้ แต่ฉันคิดว่ามันเป็นสิ่งสำคัญที่จะมีที่นี่เพราะฉันพบกระทู้นี้ภายในหนึ่งชั่วโมงแรกที่พบปัญหา

ฉัน 98% แน่ใจว่าการแก้ไขเดียวกันจะทำงานกับกล่องอินพุตและสิ่งอื่นใด ขัดขวางกิจกรรมการสัมผัสและประมวลผลแยกกันโดยไม่ปล่อยให้พวกมันแพร่กระจายหรือสร้างฟองและพิจารณาเลือกสิ่งใด ๆ หลังจากหมดเวลาเล็กน้อยเพื่อให้แน่ใจว่า Safari ไม่รู้จักลำดับเป็นตัวกระตุ้นแป้นพิมพ์

ฉันเห็นคนที่นี่ทำสิ่งแปลก ๆ ด้วย JavaScript หรือฟังก์ชั่นวิวพอร์ตและปิดการซูมด้วยตนเองบนอุปกรณ์ทั้งหมด นั่นไม่ควรเป็นทางออกในความคิดของฉัน การเพิ่มตัวอย่าง CSS นี้จะปิดการซูมอัตโนมัติใน iOS โดยไม่เปลี่ยนขนาดตัวอักษรของคุณเป็นจำนวนคงที่เช่น 16px

ตามค่าเริ่มต้นฉันใช้ขนาดตัวอักษร 93.8% (15px) ที่ช่องป้อนข้อมูลและโดยการเพิ่มตัวอย่าง CSS ของฉันซึ่งจะอยู่ที่ 93.8% ไม่จำเป็นต้องเปลี่ยนเป็น 16px หรือทำให้เป็นจำนวนที่แน่นอน

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

การตั้งค่าขนาดตัวอักษร (สำหรับช่องป้อนข้อมูล) เท่ากับขนาดตัวอักษรดูเหมือนจะเป็นสิ่งที่ป้องกันไม่ให้เบราว์เซอร์ย่อหรือขยายฉันขอแนะนำให้ใช้font-size: 1remเป็นโซลูชันที่สง่างามกว่า

เนื่องจากการซูมเข้าอัตโนมัติ (ที่ไม่มีการย่อ - ขยาย) ยังคงอยู่บน iPhone นี่คือ JavaScript ตามคำแนะนำของ dlo ที่ทำงานกับโฟกัส / เบลอ

การซูมจะถูกปิดใช้งานทันทีที่ป้อนข้อความจะถูกนำมารวมกันและจะเปิดใช้งานอีกครั้งเมื่อไม่มีการป้อนข้อมูล

หมายเหตุ:ผู้ใช้บางคนอาจไม่แก้ไขข้อความในการป้อนข้อความตัวเล็ก! ดังนั้นฉันเองต้องการเปลี่ยนขนาดตัวอักษรของอินพุตระหว่างการแก้ไข (ดูรหัสด้านล่าง)

<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>

รหัสต่อไปนี้จะเปลี่ยนขนาดข้อความของอินพุตเป็น 16 พิกเซล (คำนวณเช่นขนาดการซูมปัจจุบัน) ในระหว่างองค์ประกอบที่มีโฟกัส ดังนั้น iPhone จะไม่ซูมเข้าอัตโนมัติ

หมายเหตุ:อัตราการย่อ / ขยายถูกคำนวณตาม window.innerWidth และหน้าจอของ iPhone ขนาด 320 พิกเซล นี้จะมีเพียงถูกต้องสำหรับ iPhone ในโหมดแนวตั้ง

<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>

ฉันใช้เวลาสักครู่เพื่อค้นหา แต่นี่เป็นรหัสที่ดีที่สุดที่ฉันพบ ...... http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/

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));
});

ตามคำตอบของ Stephen Walsh ... รหัสนี้ใช้งานได้โดยไม่ต้องเปลี่ยนขนาดตัวอักษรของอินพุตที่มุ่งเน้น (ซึ่งดูอ่อนแอ) บวกกับการทำงานกับFastClickซึ่งฉันแนะนำให้เพิ่มไปยังไซต์มือถือทั้งหมดเพื่อช่วยนำ "เร็ว" ปรับ "ความกว้างวิวพอร์ต" ของคุณเพื่อให้เหมาะกับความต้องการของคุณ

// 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)
    });

ความคิดเห็นสำหรับคำตอบยอดนิยมเกี่ยวกับการตั้งค่าแบบอักษรเป็น 16px ถามว่าเป็นวิธีการแก้ปัญหาอย่างไรถ้าคุณต้องการแบบอักษรขนาดใหญ่ / เล็ก

ฉันไม่รู้เกี่ยวกับคุณทั้งหมด แต่การใช้ px สำหรับขนาดตัวอักษรไม่ใช่วิธีที่ดีที่สุดคุณควรใช้ em

ฉันพบปัญหานี้ในไซต์ที่ตอบสนองของฉันซึ่งฟิลด์ข้อความของฉันมีขนาดใหญ่กว่า 16 พิกเซล ฉันได้ตั้งค่าคอนเทนเนอร์ของฟอร์มเป็น 2rem และตั้งค่าฟิลด์อินพุตเป็น 1.4em ในข้อความค้นหามือถือของฉันฉันเปลี่ยนขนาดตัวอักษร html ขึ้นอยู่กับวิวพอร์ต เนื่องจาก html เริ่มต้นคือ 10 ฟิลด์อินพุตของฉันจึงคำนวณเป็น 28px บนเดสก์ท็อป

ในการลบการซูมอัตโนมัติฉันต้องเปลี่ยนอินพุตเป็น 1.6em ทำให้ขนาดตัวอักษรของฉันเพิ่มขึ้นเป็น 32px สูงขึ้นเล็กน้อยและแทบจะมองไม่เห็นเลย ใน iPhone 4 และ 5 ฉันเปลี่ยน html font-size เป็น 15px สำหรับ portrait และกลับไปที่ 10px สำหรับ landscape ดูเหมือนว่าจุดที่น่าสนใจสำหรับขนาดพิกเซลนั้นคือ 48px ซึ่งเป็นสาเหตุที่ฉันเปลี่ยนจาก 1.4em (42px) เป็น 1.6em (48px)

สิ่งที่คุณต้องทำคือหาจุดที่น่าสนใจในขนาดตัวอักษรแล้วแปลงกลับเป็นขนาด rem / em ของคุณ

นี่คือแฮ็คที่ฉันใช้กับหนึ่งในโครงการของฉัน:

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

จบลงด้วยรูปแบบและขนาดเริ่มต้นที่ฉันต้องการ แต่ไม่มีการซูมโฟกัส