Respond
1.4.2
ลิขสิทธิ์ 2011: Scott Jehl, scottjehl.com
ได้รับอนุญาตภายใต้ใบอนุญาต MIT
เป้าหมายของสคริปต์นี้คือการจัดหาสคริปต์ที่รวดเร็วและมีขนาดเล็ก (3kb minified / 1kb gzipped) เพื่อเปิดใช้งานการออกแบบเว็บแบบตอบสนองในเบราว์เซอร์ที่ไม่รองรับ CSS3 Media Queries โดยเฉพาะ Internet Explorer 8 และต่ำกว่า มันถูกเขียนในลักษณะที่อาจจะมีแพตช์รองรับเบราว์เซอร์อื่นๆ ที่ไม่รองรับเช่นกัน (ข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนั้นเร็วๆ นี้)
หากคุณไม่คุ้นเคยกับแนวคิดเกี่ยวกับ Responsive Web Design คุณสามารถอ่านได้ที่นี่และที่นี่
หน้าสาธิต (สีเปลี่ยนไปเพื่อแสดงคำสั่งสื่อที่ใช้งานได้)
@media screen and ( min-width : 480 px ){
/** ...styles for 480px and up go here **/
}อ้างอิงสคริปต์ response.min.js (1kb min/gzipped) หลังจาก CSS ทั้งหมดของคุณ (ยิ่งทำงานเร็วเท่าไร ผู้ใช้ IE จะไม่เห็นเนื้อหาแฟลชที่ไม่มีสื่อมากขึ้น)
เปิด Internet Explorer และกำปั้นด้วยความยินดี
Respond.js ทำงานโดยการขอสำเนา CSS ของคุณผ่าน AJAX ดังนั้นหากคุณโฮสต์สไตล์ชีทบน CDN (หรือโดเมนย่อย) คุณจะต้องตั้งค่าพร็อกซีในเครื่องเพื่อขอ CSS สำหรับเบราว์เซอร์ IE รุ่นเก่า เวอร์ชันก่อนหน้านี้แนะนำให้ใช้แนวทาง x-domain ที่เลิกใช้แล้ว แต่ควรใช้พร็อกซีในเครื่อง (ด้วยเหตุผลด้านประสิทธิภาพและความปลอดภัย) แทนที่จะพยายามแก้ไขข้อจำกัดข้ามโดเมน
หมายเหตุบางประการที่ควรคำนึงถึง:
สคริปต์นี้เน้นที่แคบมาก: เฉพาะข้อความค้นหาสื่อที่มีความกว้างขั้นต่ำและความกว้างสูงสุดและสื่อทุกประเภท (หน้าจอ การพิมพ์ ฯลฯ) เท่านั้นที่ได้รับการแปลเป็นเบราว์เซอร์ที่ไม่รองรับ ฉันต้องการให้สิ่งต่าง ๆ เป็นเรื่องง่ายสำหรับขนาดไฟล์ การบำรุงรักษา และประสิทธิภาพ ดังนั้นฉันจึงตั้งใจจำกัดการสนับสนุนเฉพาะคำค้นหาที่จำเป็นต่อการสร้างการออกแบบที่ตอบสนอง (เน้นมือถือเป็นอันดับแรก) ในอนาคต ฉันอาจจะปรับปรุงสิ่งต่าง ๆ เล็กน้อยเพื่อรวมเบ็ดสำหรับการแพตช์ฟีเจอร์การสืบค้นสื่อเพิ่มเติม - คอยติดตาม!
เบราว์เซอร์ที่สนับสนุน CSS3 Media Queries โดยธรรมชาติจะถูกเลือกไม่ให้เรียกใช้สคริปต์นี้โดยเร็วที่สุด ในการทดสอบการสนับสนุน เบราว์เซอร์อื่นๆ ทั้งหมดจะต้องได้รับการทดสอบอย่างรวดเร็วเพื่อดูว่ารองรับการสืบค้นสื่อหรือไม่ ก่อนที่จะดำเนินการเรียกใช้สคริปต์ต่อไป ขณะนี้การทดสอบนี้รวมไว้แยกต่างหากที่ด้านบน และใช้ window.matchMedia polyfill ซึ่งพบได้ที่นี่: https://github.com/paulirish/matchMedia.js หากคุณรวมโพลีฟิลนี้ผ่าน Modernizr หรืออย่างอื่นแล้ว คุณสามารถลบส่วนนั้นออกได้ตามสบาย
สคริปต์นี้ไม่ต้องใช้สคริปต์หรือเฟรมเวิร์กอื่นๆ (นอกเหนือจาก matchMedia polyfill ที่รวมไว้) และได้รับการปรับให้เหมาะสมสำหรับการจัดส่งบนมือถือ (ขนาดไฟล์รวมขั้นต่ำประมาณ 1kb/gzip)
ดังที่คุณอาจเดาได้ว่า การใช้งานนี้ค่อนข้างโง่ในเรื่องกฎการแยกวิเคราะห์ CSS นี่เป็นสิ่งที่ดี เพราะมันช่วยให้ทำงานเร็วมาก แต่การหลวมอาจทำให้เกิดพฤติกรรมที่ไม่คาดคิดได้เช่นกัน ตัวอย่างเช่น หากคุณใส่คำค้นหาสื่อทั้งหมดในความคิดเห็นโดยตั้งใจที่จะปิดการใช้งานกฎ คุณอาจพบว่ากฎเหล่านั้นจะถูกเปิดใช้งานในเบราว์เซอร์ที่ไม่รองรับคำค้นหาสื่อ
Respond.js จะไม่แยกวิเคราะห์ CSS ที่อ้างอิงผ่าน @import และจะไม่ทำงานกับคำสั่งสื่อภายในองค์ประกอบสไตล์ เนื่องจากสไตล์เหล่านั้นไม่สามารถขอซ้ำเพื่อแยกวิเคราะห์ได้
เนื่องจากข้อจำกัดด้านความปลอดภัย เบราว์เซอร์บางตัวอาจไม่อนุญาตให้สคริปต์นี้ทำงานกับ file:// urls (เนื่องจากใช้ xmlHttpRequest) รันบนเว็บเซิร์ฟเวอร์
หากคำขอไฟล์ CSS ที่รวมสไตล์เฉพาะของ MQ อยู่หลังการเปลี่ยนเส้นทาง Respond.js จะล้มเหลวโดยไม่แจ้งให้ทราบ ไฟล์ CSS ควรตอบสนองด้วยสถานะ 200
ในปัจจุบัน คุณลักษณะของสื่อในองค์ประกอบลิงก์ได้รับการสนับสนุน แต่เฉพาะเมื่อสไตล์ชีตที่เชื่อมโยงไม่มีการสืบค้นสื่อเท่านั้น หากมีข้อความค้นหา แอตทริบิวต์สื่อจะถูกละเว้น และข้อความค้นหาภายในจะถูกแยกวิเคราะห์ตามปกติ กล่าวอีกนัยหนึ่ง คำสั่ง @media ใน CSS จะมีความสำคัญมากกว่า
ตามรายงาน หากไฟล์ CSS ถูกเข้ารหัสใน UTF-8 ด้วย Byte-Order-Mark (BOM) ไฟล์เหล่านั้นจะไม่ทำงานกับ Respond.js ใน IE7 หรือ IE8 ระบุไว้ในฉบับที่ 97
คำเตือน: การรวมกฎ @font-face ไว้ในคิวรีสื่อจะทำให้ IE7 และ IE8 หยุดทำงานระหว่างการโหลด หากต้องการแก้ไขปัญหานี้ ให้วางกฎ @font-face ไว้ในที่ที่เปิดกว้าง เหมือนกับเป็นพี่น้องกับคำสั่งสื่ออื่นๆ
หากคุณมีสไตล์ชีตที่อ้างอิงมากกว่า 32 รายการ IE จะส่งข้อผิดพลาด Invalid procedure call or argument เชื่อมต่อ CSS ของคุณเข้าด้วยกันและปัญหาจะหายไป
ไม่รองรับซอร์สแมป Sass/SCSS @media -sass-debug-info จะทำลาย response.js บันทึกไว้ในฉบับที่ 148
Internet Explorer 9 รองรับคำสั่งสื่อ css3 แต่ไม่อยู่ในเฟรมเมื่อ CSS ที่มีคำสั่งสื่ออยู่ในไฟล์ภายนอก (ดูเหมือนว่าจะเป็นข้อบกพร่องใน IE9 - ดูhttps://stackoverflow.com/questions/10316247/media-queries - ล้มเหลวภายใน ie9-iframe) ดูคอมมิตนี้สำหรับการแก้ไขหากคุณประสบปัญหานี้ https://github.com/NewSignature/Respond/commit/1c86c66075f0a2099451eb426702fc3540d2e603
ไม่รองรับ Nested Media Queries
โดยพื้นฐานแล้ว สคริปต์จะวนซ้ำ CSS ที่อ้างอิงในหน้านั้น และเรียกใช้นิพจน์ทั่วไปหรือสองนิพจน์ในเนื้อหาเพื่อค้นหาคำสั่งสื่อและบล็อก CSS ที่เกี่ยวข้อง ใน Internet Explorer เนื้อหาของสไตล์ชีทไม่สามารถเรียกคืนได้ในสถานะแยกวิเคราะห์ล่วงหน้า (ซึ่งใน IE 8- หมายความว่าคำสั่งสื่อจะถูกลบออกจากข้อความ) ดังนั้น Respond.js จึงขอไฟล์ CSS อีกครั้งโดยใช้ Ajax และ แยกวิเคราะห์การตอบกลับข้อความจากที่นั่น ตรวจสอบให้แน่ใจว่าได้กำหนดค่าแคชของไฟล์ CSS ของคุณอย่างถูกต้อง เพื่อให้คำขอซ้ำนี้ไม่ได้ไปที่เซิร์ฟเวอร์จริงๆ โดยไปที่แคชของเบราว์เซอร์แทน
จากนั้น บล็อกคิวรีสื่อแต่ละบล็อกจะถูกต่อท้ายส่วนหัวตามลำดับผ่านองค์ประกอบสไตล์ และองค์ประกอบสไตล์เหล่านั้นจะถูกเปิดใช้งานและปิดใช้งาน (อ่าน: ต่อท้ายและลบออกจาก DOM) ขึ้นอยู่กับว่าความกว้างต่ำสุด/สูงสุดเปรียบเทียบกับความกว้างของเบราว์เซอร์อย่างไร แอตทริบิวต์สื่อในองค์ประกอบสไตล์จะตรงกับแอตทริบิวต์ของข้อความค้นหาใน CSS ดังนั้นอาจเป็น "หน้าจอ" "โปรเจ็กเตอร์" หรืออะไรก็ได้ที่คุณต้องการ เส้นทางสัมพัทธ์ใดๆ ที่มีอยู่ใน CSS จะมีคำนำหน้าด้วย href ของสไตล์ชีต ดังนั้นเส้นทางรูปภาพจะนำทางไปยังปลายทางที่ถูกต้อง
แน่นอนว่ามีสองสามคน:
นี่ไม่ใช่สคริปต์โพลีฟิล CSS3 Media Query เพียงตัวเดียวที่มีอยู่ แต่มันอาจจะเร็วที่สุดก็ได้
หากคุณกำลังมองหาการสนับสนุน CSS3 Media Query ที่มีประสิทธิภาพมากขึ้น คุณอาจลองดู https://code.google.com/p/css3-mediaqueries-js/ ในการทดสอบ ฉันพบว่าสคริปต์นั้นช้าอย่างเห็นได้ชัดเมื่อเรนเดอร์การออกแบบที่ตอบสนองที่ซับซ้อน (ทั้งในขนาดไฟล์และประสิทธิภาพ) แต่จริงๆ แล้วรองรับฟีเจอร์การสืบค้นสื่อมากกว่าสคริปต์นี้มาก เคล็ดลับหมวกใหญ่สำหรับผู้เขียน! -
