การออกแบบเว็บที่ตอบสนองกำลังทำงานบนเดสก์ท็อป แต่ไม่ใช่บนอุปกรณ์เคลื่อนที่

117

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

มีอะไรผิดปกติ?

mobile web responsive-design

— Tadas Davidsonas
แหล่งที่มา

1

คุณจะต้องเพิ่มข้อมูลและรหัสเพิ่มเติมเพื่อให้ทุกคนเป็นประโยชน์ CSS, HTML ฯลฯ ของคุณเฟรมเวิร์กอะไร (เช่น Twitter Bootstrap) ที่คุณใช้ถ้ามี ฯลฯ

— ajacian81

308

คุณอาจไม่มีเมตาแท็กวิวพอร์ตในส่วนหัว html:

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

หากไม่มีอุปกรณ์จะถือว่าและตั้งค่าวิวพอร์ตเป็นขนาดเต็ม

ข้อมูลเพิ่มเติมที่นี่

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

2

มันสามารถทำงานบนเบราว์เซอร์ที่ไม่มีบรรทัดนี้ แต่บนมือถือต้องใช้บรรทัดนี้

— Tadas Davidsonas

3

ฉันแค่รักคุณ

— Dimitris Filippou

ฉันก็รักคุณเช่นกัน @ ΔημήτρηςΦιλίππου

— Agush

อีกคำแห่งรักถึงคุณ

— btlm

3

ตรวจสอบให้แน่ใจว่าการผลิตindex.htmlมีแท็กรวมถึงการพัฒนาจริง ๆindex.html

— ฮาลาฟี

6

ฉันยังต้องเผชิญกับปัญหานี้ ในที่สุดฉันก็ได้ทางออก ใช้รหัสต่อไปนี้ หวังว่าปัญหาจะคลี่คลาย

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

— อิสลามที่สวยงาม
แหล่งที่มา

2

แม้ว่าจะมีคำตอบข้างต้นและใช้ได้

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

แต่ถ้าคุณใช้ React และ webpack อย่าลืมปิดแท็กองค์ประกอบ

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

— Shadab Ahmed
แหล่งที่มา

-1

เมตาแท็กที่ตอบสนอง

เพื่อให้แน่ใจว่าการแสดงผลที่เหมาะสมและการซูมภาพแบบสัมผัสสำหรับอุปกรณ์ทั้งหมดเพิ่มแท็ก viewport <head>เมตาตอบสนองของคุณ

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

— Marcelo ออสเตรีย
แหล่งที่มา