ฉันจะ“ ปิดการใช้งาน” ซูมบนหน้าเว็บมือถือได้อย่างไร?

316

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

อย่างไรก็ตาม (อย่างน้อยบนโทรศัพท์มือถือ Android ของฉัน) ทุกครั้งที่ฉันคลิกที่อินพุตบางส่วนหน้าทั้งหมดจะซูมเข้าไปที่นั่นบดบังส่วนที่เหลือของหน้า มีคำสั่ง HTML หรือ CSS เพื่อปิดใช้งานการซูมประเภทนี้ในหน้าเว็บ moble หรือไม่?

html css mobile

— Martín Fixman
แหล่งที่มา

3

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

— tomasz86

8

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

— ลุค

11

คุณทำไม่ได้ - หากผู้ใช้ต้องการซูมโปรดปล่อยให้พวกเขาทำ นอกจากนี้: Chrome มีตัวเลือกให้เพิกเฉยต่อคำขอของคุณ

— Martin

2

สำหรับผู้ใช้ Android Firefox, มีซูมเสมอสำหรับ Firefox add-on แนะนำเป็นอย่างยิ่ง

— โคลินดีเบนเน็ตต์

2

จากiOS 10 , user-scalable=noถูกละเว้น ดูสิ่งนี้

— Raptor

443

นี่ควรเป็นทุกสิ่งที่คุณต้องการ

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

— kgutteridge
แหล่งที่มา

23

สิ่งนี้จะปิดการใช้งานความสามารถของผู้ใช้ในการซูมทั่วไปเช่นเดียวกับความสามารถของเบราว์เซอร์ในการปรับหน้าเว็บให้พอดีกับวิวพอร์ตโดยอัตโนมัติ - มาร์ตินทุกคนกำลังมองหาวิธีการปิดการใช้งาน พฤติกรรม.

— matt lohkamp

3

ตอนนี้มีคนที่ Posterous ทำอย่างนั้นในขณะที่มีแบบอักษรขนาด 12px ดังนั้นจึงไม่สามารถอ่านได้และฉันไม่สามารถหาวิธีแก้ไขได้

— Emil Ivanov

41

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

— Jack Marchetti

6

เมตาแท็กที่สองทำหน้าที่อะไร ไม่ได้width=device-widthอยู่ในเมตาแท็กแรกแล้วใช่ไหม

— ลุค

1

ดูเหมือนว่าจะใช้งานไม่ได้กับ iOS 7 ดูคำตอบ

— lukad03

159

สำหรับคนที่มางานปาร์ตี้คำตอบของ kgutteridge ไม่เหมาะกับฉันและคำตอบของ Benny Neugebauer รวมไปถึง target-densitydpi ( คุณลักษณะที่เลิกใช้แล้ว )

อย่างไรก็ตามมันใช้งานได้สำหรับฉัน:

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

— ลุคเคลเลอร์
แหล่งที่มา

7

นี่คือคำตอบที่ถูกต้องตอนนี้ คำตอบอื่น ๆ ไม่ทำงานอีกต่อไป (อย่างน้อยสำหรับ iOS 7)

— KyleFarris

7

มีใครลองใช้ iOS 10.x ฉันคิดว่ามันใช้ไม่ได้เหรอ

— JMac

ไม่ได้ผลสำหรับฉัน มันปรับขนาดหน้าจอทั้งหมดด้วยแถบเลื่อนและซูมไม่ดี

— Cocorico

1

ยังไม่ทำงานบน Safari / iOS 11 เนื่องจากปัญหา SFB ที่ Apple

— 15ee8f99-57ff-4f92-890c-b56153

52

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

แสดงหน้าตามความกว้างของอุปกรณ์ไม่ขยาย:

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

ป้องกันการปรับขนาดและป้องกันไม่ให้ผู้ใช้สามารถซูม:

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

การลบการซูมทั้งหมดการปรับขนาดทั้งหมด

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

— SW4
แหล่งที่มา

"โดยทั่วไปผู้ใช้ไม่ควรถูก จำกัด " แต่เมื่อพัฒนาแอปพลิเคชันเว็บสำหรับมือถือคุณมักจะต้องจัดการกับ "zom-in บนโฟกัสอินพุท" ฉันพบว่ามีประโยชน์ในการปิดใช้งานการซูมในกรณีนั้น

— Le 'Nton

@ Le'nton ปิดการใช้งานการซูมทั้งหน้าไม่ใช่วิธีที่ดีในการจัดการกับการซูมเข้าที่โฟกัสอินพุท อย่างน้อยใน iOS การซูมโฟกัสอินพุตสามารถปิดใช้งานได้โดยการเพิ่มขนาดตัวอักษรของอินพุต

— pfg

39

คุณสามารถใช้ได้:

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

แต่โปรดทราบว่ากับAndroid 4.4คุณสมบัติเป้าหมาย densitydpi ไม่สนับสนุน ดังนั้นสำหรับ Android 4.4 และใหม่กว่าแนะนำให้ปฏิบัติดังนี้:

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

— Benny Neugebauer
แหล่งที่มา

35

เนื่องจากยังไม่มีวิธีแก้ปัญหาสำหรับการเริ่มต้นนี่คือ CSS บริสุทธิ์สองเซนต์ของฉัน

เบราว์เซอร์มือถือ (ส่วนใหญ่) ต้องการขนาดตัวอักษรในอินพุตเป็น 16px ดังนั้น

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}

ขยายตัวอย่างข้อมูล

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

หากขนาดแบบอักษรพื้นฐานของคุณไม่ใช่ 16px หรือไม่ใช่ 16px สำหรับโทรศัพท์มือถือคุณสามารถใช้ข้อความค้นหาสื่อ

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}

ขยายตัวอย่างข้อมูล

— Azamat Rasulov
แหล่งที่มา

2

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

— KlausCPH

1

ใช่; นี่เป็นการแก้ไขปัญหาของฉันเช่นกัน! ฉันไม่ต้องการปิดใช้งานการซูมทั้งหมดและนี่คือสิ่งที่ฉันต้องการ

— เบรนแดน

1

นอกจากนี้คุณยังสามารถตั้งค่าfont-size: 1remสำหรับทั้งหน้าได้ดังนั้นแบบอักษรจึงขยายได้เป็นอย่างดีพร้อมกันหลีกเลี่ยงปัญหา "โฟกัสบนซูม"

— itachi

12

โปรดลองเพิ่มเมตาแท็กและสไตล์นี้

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


<style>
body{
        touch-action: manipulation;
    }
</style>

— Sarath Ak
แหล่งที่มา

1

ไม่ควรtouch-actionตั้งเป็นnone- developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values

— rahulroy9202

@ rahulroy9202 สำหรับฉันtouch-action: manipulation;ทำงานได้ดี touch-action: none;ไม่ได้ทำอะไร

— Umair

7

ดูเหมือนว่าเพิ่งเพิ่มเมตาแท็กไปยัง index.html ไม่ได้ป้องกันการซูมหน้า การเพิ่มสไตล์ด้านล่างจะทำเวทย์มนตร์

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

แก้ไข: การสาธิต: https://no-mobile-zoom.stackblitz.io

— Api
แหล่งที่มา

2

สิ่งนี้ควรได้รับการยอมรับการแก้ไขยังทำงานบน mobile safari ios13 atm

— Magico

ใช้งานได้ตามที่คาดหวังจากมือถือขอบคุณ! ตรวจสอบที่นี่proyecto26.com/animatable-component

— jdnichollsc

6

วิธีแก้ปัญหาที่เป็นไปได้สำหรับ Web Apps: ในขณะที่ไม่สามารถปิดการซูมใน iOS Safari ได้อีกต่อไปมันจะถูกปิดการใช้งานเมื่อเปิดไซต์จากทางลัดบนหน้าจอหลัก

เพิ่มเมตาแท็กเหล่านี้เพื่อประกาศแอปของคุณเป็น "ความสามารถของ Web App":

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name='apple-mobile-web-app-capable' content='yes' />

แต่เพียงใช้คุณลักษณะนี้ถ้าแอปของคุณด้วยตนเองอย่างยั่งยืนเช่นปุ่มเดินหน้า / ถอยหลังและแถบ URL ตลอดจนตัวเลือกการแบ่งปันถูกปิดใช้งาน (คุณยังสามารถปัดไปทางซ้ายและขวาได้) วิธีการนี้จะเปิดใช้งานแอพอย่าง ux เบราว์เซอร์เต็มหน้าจอจะเริ่มต้นเฉพาะเมื่อโหลดไซต์จากหน้าจอโฮม ฉันแค่ทำให้มันทำงานหลังจากที่ฉันรวมแอปเปิ้ลทัชไอคอน -180x180.png ในโฟลเดอร์รูทของฉัน

เป็นโบนัสคุณอาจต้องการรวมตัวแปรของสิ่งนี้ด้วย:

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>

— denkquer
แหล่งที่มา

1

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

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

การเพิ่มแอตทริบิวต์ทั้งหมดเช่น 'ความกว้าง', 'ขนาดเริ่มต้น', 'ความกว้างสูงสุด', 'ระดับสูงสุด' อาจไม่ทำงาน ดังนั้นเพียงเพิ่มองค์ประกอบข้างต้น

— Kasumi Gunasekara
แหล่งที่มา

-1

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

กรุณาเพิ่มสคริปต์เพื่อปิดใช้งานหยิกแตะโฟกัสซูม

— เปรม
แหล่งที่มา