เว็บไซต์ที่ตอบสนองได้ย่อขยายให้เต็มความกว้างบนมือถือ

ฉันกำลังทดสอบแถบนำทางการตอบสนอง Bootstrap และฉันมีเว็บไซต์ตัวอย่าง เมื่อฉันปรับขนาดเบราว์เซอร์บนเดสก์ท็อปทุกอย่างทำงานได้ดีรวมถึงแถบนำทางซึ่งกลายเป็นเมนูที่พับได้ด้วยไอคอนขนาดเล็กที่ด้านบนซึ่งฉันสามารถคลิกเพื่อดูปุ่มเมนูเพิ่มเติม

แต่เมื่อฉันลองจากเบราว์เซอร์มือถือ (ฉันลองใช้ Chrome และเบราว์เซอร์อินเทอร์เน็ตบน Android) ฉันไม่เห็นการออกแบบที่ตอบสนองได้ ฉันเห็นเฉพาะเดสก์ท็อปรุ่นเล็ก ๆ อย่างเว็บไซต์เท่านั้น

ใครช่วยชี้ให้เห็นสิ่งที่ฉันทำผิด?

เพิ่มไปยังส่วนหัว HTML ของคุณ ..

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

สิ่งนี้จะบอกเบราว์เซอร์ของอุปกรณ์ขนาดเล็กว่าจะขยายขนาดหน้าอย่างไร คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ที่นี่: https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

ตามที่แนะนำไว้ที่นี่http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

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

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

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

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

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