คุณจะปิดการใช้งานการซูมวิวพอร์ตบน Mobile Safari ได้อย่างไร

ฉันได้ลองทั้งสามอย่างนี้แล้วไม่เกิดประโยชน์:

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

แต่ละค่าแตกต่างกันที่ฉันพบโดยการค้นหาของ Google หรือการค้นหา SO แต่ไม่มีค่า ' user-scalable = X ' ที่ใช้งานได้

ฉันยังพยายามจุลภาคคั่นค่าแทนเครื่องหมายอัฒภาคไม่มีโชค จากนั้นฉันพยายามเพียง แต่มีuser-scalableค่าอยู่ แต่ก็ยังไม่มีโชค

UPDATE

รับสิ่งนี้จากเว็บไซต์ของ Apple และใช้งานได้:

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

ปรากฎว่าปัญหาคือราคาที่ไม่ได้มาตรฐานเพราะฉันได้คัดลอกเมตาแท็กจากเว็บไซต์ที่ใช้พวกเขาอ๊ะ

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

สิ่งนี้ใช้ได้กับฉันใน Mobile Safari ใน iOS 4.2

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

สำหรับผู้ที่กำลังมองหาโซลูชัน iOS 10 user-scaleable=noถูกปิดการใช้งานใน Safari สำหรับ iOS 10 เหตุผลคือ Apple กำลังพยายามปรับปรุงการช่วยสำหรับการเข้าถึงโดยอนุญาตให้ผู้ใช้ซูมบนเว็บเพจ

จากบันทึกประจำรุ่น :

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

เท่าที่ฉันเข้าใจเราก็โชคไม่ดี

@mattis ถูกต้องที่ iOS 10 Safari จะไม่อนุญาตให้คุณปิดใช้งานการบีบนิ้วเพื่อซูมด้วยแอตทริบิวต์ที่ปรับขนาดได้โดยผู้ใช้ อย่างไรก็ตามฉันได้รับมันเพื่อปิดการใช้งาน PreventDefault ในเหตุการณ์ 'gesturestart' ฉันยืนยันสิ่งนี้บน Safari ใน iOS 10.0.2 แล้วเท่านั้น

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

สำหรับ iphones ซาฟารีจนถึง iOS 10 "วิวพอร์ต" ไม่ใช่วิธีแก้ปัญหาฉันไม่ชอบวิธีนี้ แต่ฉันใช้รหัสจาวาสคริปต์แล้วและช่วยฉันด้วย

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

user-scalable=0

สิ่งนี้ไม่ทำงานบน iOS 10 อีกต่อไป Apple ลบคุณลักษณะดังกล่าว

ไม่มีทางที่คุณจะสามารถปิดการใช้งานเว็บไซต์ซูมบน iOS ได้ในตอนนี้เว้นแต่คุณจะสร้างแอพแพลตฟอร์มขั้นต้น

ลองเพิ่มสิ่งต่อไปนี้ในแท็กหัวของคุณ:

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

นอกจากนี้

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

ในที่สุดไม่ว่าจะเป็น style-attribute หรือในไฟล์ css ของคุณให้เพิ่มข้อความต่อไปนี้สำหรับเบราว์เซอร์ที่ใช้ webkit:

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

ฉันได้มันทำงานใน iOS 12 ด้วยรหัสต่อไปนี้:

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

ด้วยคำสั่งแรกถ้าฉันมั่นใจว่ามันจะทำงานเฉพาะในสภาพแวดล้อม iOS (ถ้ามันดำเนินการใน Android พฤติกรรมการเลื่อนจะเสีย) นอกจากนี้ทราบชุดตัวเลือกในการpassivefalse

ทำงานได้ดีใน IOS 10.3.2

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

ขอบคุณ @arthur และ @aleclarson

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

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

และกฎต่อไปนี้กับสไตล์ชีท CSS

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

บางครั้งคำสั่งอื่น ๆ ในcontentแท็กอาจทำให้การเดา / การแก้ปัญหาที่ดีที่สุดของ Apple ในการจัดหน้าของคุณเป็นสิ่งที่คุณต้องปิดใช้งานการซูมด้วยนิ้ว

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

ใน Safari 9.0 ขึ้นไปคุณสามารถใช้การย่อขนาดให้พอดีกับเมตาแท็กวิวพอร์ตดังที่แสดงด้านล่าง

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

ฉันโง่มี div wrapper ซึ่งมีความกว้างวัดเป็นพิกเซล เบราว์เซอร์อื่น ๆ ดูเหมือนจะฉลาดพอที่จะรับมือกับสิ่งนี้ เมื่อฉันแปลงความกว้างเป็นค่าเปอร์เซ็นต์มันก็ใช้ได้ดีบน Safari mobile เช่นกัน น่ารำคาญมาก

.page{width: 960px;}

ถึง

.page{width:93.75%}

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

การใช้touch-actionคุณสมบัติCSS เป็นโซลูชันที่หรูหราที่สุด ทดสอบกับ iOS 13.5

หากต้องการปิดใช้งานท่าทางการย่อ / ขยายและแตะสองครั้งเพื่อซูม:

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

หากแอปของคุณไม่จำเป็นต้องทำการเลื่อนเช่นเลื่อนให้ใช้สิ่งนี้:

body {
  touch-action: none;
}

เพื่อให้สอดคล้องกับข้อกำหนดการช่วยสำหรับการเข้าถึง WAI WCAG 2.0 AA คุณจะต้องไม่ปิดใช้งานการซูมด้วยนิ้ว (WCAG 2.0: SC 1.4.4 ปรับขนาดระดับข้อความ AA) คุณสามารถอ่านเพิ่มเติมได้ที่นี่: ความสามารถในการเข้าถึงบนมือถือ: WCAG 2.0 และแนวทาง W3C / WAI อื่น ๆ นำไปใช้กับมือถือได้อย่างไร 2.2 ซูม / ขยาย

อันนี้ควรทำงานกับ iphone ฯลฯ

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