ปิดใช้งานการซูม viewport ใน iOS 10+ ซาฟารีหรือไม่

ฉันได้อัปเดต iPhone ของฉัน 6 บวกเป็น iOS 10 รุ่นเบต้าและก็พบว่าในซาฟารีมือถือคุณสามารถซูมหน้าเว็บใด ๆ โดยการแตะหรือจับIGNOREuser-scalable=noรหัสในเมตาแท็ก ฉันไม่รู้ว่ามันเป็นบั๊กหรือฟีเจอร์ หากถือเป็นฟีเจอร์เราจะปิดการใช้งาน viewport zoom iOS 10 safari ได้อย่างไร

อัปเดตในรุ่น iOS 11/12, iOS 11 และ iOS 12 ซาฟารียังคงไม่เคารพuser-scalable=noเมตาแท็ก

เป็นไปได้ที่จะป้องกันการปรับขนาดหน้าเว็บในซาฟารีบน iOS 10 แต่จะมีส่วนร่วมกับคุณมากขึ้น ฉันเดาว่าเหตุผลคือระดับของความยากลำบากควรหยุด devs ผู้ขนส่งสินค้าไม่ให้วาง "user-scalable = no" ลงในแท็กวิวพอร์ตทุกแท็กและทำให้สิ่งต่าง ๆ เป็นเรื่องยากสำหรับผู้ใช้ที่มีปัญหาด้านสายตา

ถึงกระนั้นฉันต้องการเห็น Apple เปลี่ยนการใช้งานของพวกเขาเพื่อให้มีวิธีง่าย ๆ (เมตาแท็ก) ในการปิดการใช้งานการแตะสองครั้งเพื่อซูม ปัญหาส่วนใหญ่เกี่ยวข้องกับการโต้ตอบนั้น

คุณสามารถหยุดการบีบนิ้วเพื่อซูมด้วยสิ่งนี้:

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

โปรดทราบว่าหากเป้าหมายที่ลึกกว่าใด ๆ เรียก stopPropagation ในเหตุการณ์เหตุการณ์จะไม่ถึงเอกสารและพฤติกรรมการปรับสเกลจะไม่สามารถป้องกันได้โดยผู้ฟังนี้

การปิดการใช้งานการแตะสองครั้งเพื่อซูมนั้นคล้ายคลึงกัน คุณปิดการใช้งานการแตะใด ๆ ในเอกสารที่เกิดขึ้นภายใน 300 มิลลิวินาทีของการแตะก่อนหน้า:

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

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

ถ้าคุณกำลังพยายามที่จะแก้ปัญหานี้ใน WKWebView ใน app พื้นเมือง, การแก้ปัญหาดังกล่าวข้างต้นจะทำงานได้ แต่นี้เป็นทางออกที่ดีกว่า: https://stackoverflow.com/a/31943976/661418 และดังที่กล่าวไว้ในคำตอบอื่น ๆ ใน iOS 10 เบต้า 6 ตอนนี้ Apple ได้จัดทำธงเพื่อเป็นเกียรติแก่เมตาแท็ก

อัปเดตพฤษภาคม 2560:ฉันแทนที่ 'การตรวจสอบความยาวสัมผัสบน touchstart' แบบเก่าของการปิดใช้งานการซูมด้วยการบีบด้วยการตรวจสอบเหตุการณ์ที่ง่ายขึ้น น่าเชื่อถือมากขึ้นสำหรับทุกคน

นี่คือคุณสมบัติใหม่ใน iOS 10

จากบันทึกประจำรุ่น iOS 10 เบต้า 1:

• เพื่อปรับปรุงการช่วยสำหรับการเข้าถึงเว็บไซต์ใน Safari ผู้ใช้สามารถกดเพื่อซูมได้แม้ในขณะที่เว็บไซต์กำหนดuser-scalable=noในวิวพอร์ต

ฉันคาดหวังว่าเราจะเห็นส่วนเสริม JS ในไม่ช้าเพื่อปิดการใช้งานในทางใดทางหนึ่ง

ฉันสามารถแก้ไขได้โดยใช้touch-actionคุณสมบัติ css ในแต่ละองค์ประกอบ ลองตั้งค่าtouch-action: manipulation;องค์ประกอบที่มีการคลิกทั่วไปเช่นลิงก์หรือปุ่ม

ปรากฏว่าพฤติกรรมนี้มีการเปลี่ยนแปลงที่คาดคะเนในเบต้าล่าสุดซึ่งในขณะที่เขียนเป็นเบต้า 6

จากบันทึกประจำรุ่นสำหรับ iOS 10 Beta 6:

WKWebViewตอนนี้เริ่มต้นที่จะเคารพuser-scalable=noจากวิวพอร์ต ลูกค้าWKWebViewสามารถปรับปรุงการเข้าถึงและให้ผู้ใช้สามารถหยิกเพื่อซูมเข้าบนหน้าเว็บทั้งหมดโดยการตั้งค่าWKWebViewConfiguration คุณสมบัติการignoresViewportScaleLimitsYES

อย่างไรก็ตามในการทดสอบของฉัน (มี จำกัด มาก) ฉันยังไม่สามารถยืนยันได้ว่าเป็นกรณีนี้

แก้ไข: ยืนยันแล้ว, iOS 10 Beta 6 เคารพuser-scalable=noตามค่าเริ่มต้นสำหรับฉัน

วิธีแก้ปัญหาที่ทำงานใน Mobile Safari ในขณะที่เขียนนี้คือต้องมีอาร์กิวเมนต์ที่สามaddEventListenerเป็น{ passive: false }ดังนั้นวิธีแก้ไขปัญหาทั้งหมดจะมีลักษณะดังนี้:

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

คุณอาจต้องการตรวจสอบว่าตัวเลือกได้รับการสนับสนุนให้ใช้งานร่วมกันได้หรือไม่

ฉันใช้เวลาประมาณหนึ่งชั่วโมงเพื่อค้นหาตัวเลือกจาวาสคริปต์ที่มีประสิทธิภาพยิ่งขึ้นและไม่พบ มันเกิดขึ้นเพียงไม่กี่วันที่ผ่านมาฉันเล่นซอกับhammer.js (Hammer.js เป็นห้องสมุดที่ให้คุณจัดการกิจกรรมการสัมผัสทุกประเภทได้อย่างง่ายดาย) และส่วนใหญ่ล้มเหลวในสิ่งที่ฉันพยายามทำ

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

ตรวจสอบให้แน่ใจว่าคุณใส่ hammer.js ไว้ในหน้าของคุณแล้วลองติดจาวาสคริปต์นี้ไว้ที่อื่น:

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

ฉันลองคำตอบก่อนหน้าเกี่ยวกับการบีบนิ้วเพื่อซูม

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

แต่บางครั้งหน้าจอยังคงซูมเมื่อเหตุการณ์ สัมผัสความยาว> 1 ฉันค้นพบวิธีที่ดีที่สุดคือการใช้เหตุการณ์ touchmove เพื่อหลีกเลี่ยงการใช้นิ้วเคลื่อนบนหน้าจอ รหัสจะเป็นดังนี้:

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

หวังว่ามันจะช่วย

ตรวจสอบสเกลแฟคเตอร์ในเหตุการณ์ touchove จากนั้นป้องกันเหตุการณ์การสัมผัส

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

เราสามารถรับทุกสิ่งที่เราต้องการโดยการฉีดกฏสไตล์เดียวและขัดขวางการซูมเหตุการณ์:

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

✔ปิดใช้งานการซูมหยิก

✔ปิดใช้งานการซูมสองครั้ง

✔เลื่อนไม่ได้รับผลกระทบ

✔ปิดใช้งานการไฮไลต์การแตะ (ซึ่งถูกเรียกใช้บน iOS ตามกฎสไตล์)

ประกาศ: ปรับการตรวจจับ iOS ตามความต้องการของคุณ เพิ่มเติมเกี่ยวกับที่นี่

ขออภัยที่lukejacksonและPiotr Kowalskiซึ่งคำตอบปรากฏในแบบฟอร์มที่แก้ไขในโค้ดด้านบน

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

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

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

แรงบันดาลใจจากสรุปสาระสำคัญจาก mutewinterและคำตอบของโยเซฟ

ในกรณีเฉพาะของฉันฉันใช้ Babylon.js เพื่อสร้างฉาก 3 มิติและทั้งหน้าของฉันประกอบด้วยผ้าใบเต็มหน้าจอเดียว เอ็นจิ้น 3 มิติมีฟังก์ชั่นการซูมของตัวเอง แต่ใน iOS การบีบนิ้วเพื่อซูมจะรบกวนสิ่งนั้น ฉันอัปเดตคำตอบ @Joseph เพื่อแก้ไขปัญหาของฉัน หากต้องการปิดการใช้งานฉันคิดว่าฉันต้องส่ง {passive: false} เป็นตัวเลือกให้กับผู้ฟังเหตุการณ์ รหัสต่อไปนี้ใช้งานได้สำหรับฉัน:

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

ฟังดูแปลกอย่างน้อย Safari สำหรับ iOS 10.2 การแตะสองครั้งเพื่อซูมถูกปิดการใช้งานอย่างน่าอัศจรรย์หากองค์ประกอบหรือบรรพบุรุษของคุณมีสิ่งใดสิ่งหนึ่งดังต่อไปนี้:

1. ผู้ฟัง onClick - มันสามารถเป็น noop ง่าย ๆ
2. cursor: pointerชุดใน CSS

การซูมโดยไม่ตั้งใจจะเกิดขึ้นเมื่อ:

• ผู้ใช้สองคนแตะที่ส่วนประกอบของอินเทอร์เฟซ
• ผู้ใช้โต้ตอบกับวิวพอร์ตโดยใช้หลักสองหลักขึ้นไป (หยิก)

เพื่อป้องกันพฤติกรรมการแตะสองครั้งฉันพบวิธีแก้ไขปัญหาง่าย ๆ สองวิธี:

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

ทั้งสองอย่างนี้ขัดขวาง Safari (iOS 10.3.2) จากการซูมเข้าที่ปุ่ม ในขณะที่คุณเห็นหนึ่งคือ JavaScript เท่านั้นอื่น ๆ เป็น CSS เท่านั้น ใช้อย่างเหมาะสม

นี่คือตัวอย่าง: https://codepen.io/lukejacksonn/pen/QMELXQ

ฉันยังไม่ได้พยายามป้องกันพฤติกรรมการบีบ (แต่) ส่วนใหญ่เป็นเพราะฉันมักจะไม่สร้างอินเทอร์เฟซแบบมัลติทัชสำหรับเว็บและอย่างที่สองฉันมาถึงความคิดที่ว่าอินเทอร์เฟซทั้งหมด - ใช้ได้ในสถานที่ต่างๆ ฉันยังคงออกแบบเพื่อหลีกเลี่ยงผู้ใช้ที่ต้องทำสิ่งนี้เพื่อให้ UI ของคุณสามารถเข้าถึงได้โดยไม่ต้องเสียค่าใช้จ่าย

พบการทำงานที่เรียบง่ายซึ่งดูเหมือนจะป้องกันไม่ให้ดับเบิลคลิกเพื่อซูม:

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

ตามที่ร้องขอฉันได้โอนความคิดเห็นของฉันไปยังคำตอบเพื่อให้ผู้คนสามารถโหวตได้:

ใช้งานได้ 90% ของเวลาสำหรับ 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" />

และ

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

ฉันตรวจสอบคำตอบทั้งหมดข้างต้นในทางปฏิบัติกับหน้าของฉันบน iOS (iPhone 6, iOS 10.0.2) แต่ไม่ประสบความสำเร็จ นี่เป็นวิธีแก้ปัญหาการทำงานของฉัน:

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

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

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