สิ่งที่เปลี่ยนแปลง

สังเกตว่าไม่มี<meta name="viewport" content="width=device-width, initial-scale=1">ซึ่งปิดใช้งานลักษณะการซูมของไซต์ในอุปกรณ์มือถือ นอกจากนี้ เรารีเซ็ตความกว้างของคอนเทนเนอร์และเปลี่ยนแถบนำทางเพื่อป้องกันการยุบ และโดยพื้นฐานแล้วใช้งานได้ดี

เกี่ยวกับแถบนำทาง

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

เบราว์เซอร์ การเลื่อน และองค์ประกอบคงที่

เลย์เอาต์ที่ไม่ตอบสนองเน้นข้อเสียเปรียบที่สำคัญขององค์ประกอบคงที่ องค์ประกอบคงที่ใดๆ เช่น แถบนำทางคงที่ จะไม่สามารถเลื่อนได้เมื่อวิวพอร์ตแคบกว่าเนื้อหาของหน้า กล่าวอีกนัยหนึ่ง เนื่องจากความกว้างของคอนเทนเนอร์ที่ไม่ตอบสนองคือ 970px และวิวพอร์ต 800px คุณอาจซ่อนเนื้อหาได้ 170px

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

ระบบกริดที่ไม่ตอบสนอง