Fullscreen API เพิ่มเมธอดเพื่อแสดงองค์ประกอบเฉพาะ (และองค์ประกอบย่อย) ในโหมดเต็มหน้าจอ และออกจากโหมดเต็มหน้าจอเมื่อไม่ต้องการใช้อีกต่อไป ซึ่งหมายความว่าวิธีใช้ HTML5 API แบบเต็มหน้าจอของผู้ใช้ เช่น เกมออนไลน์ เมื่อคุณเปลี่ยนเป็นโหมดเต็มหน้าจอ หน้าเว็บจะใช้พื้นที่มากที่สุด
นี่ไม่ใช่สิ่งที่คุณต้องการเสมอไป ส่วนใหญ่คุณต้องการทำให้บางส่วนของหน้าเต็มหน้าจอ เช่น วิดีโอหรือเกม นี่เป็นเวลาที่ดีที่จะใช้ Fullscreen API จนกว่าจะปิดโหมดเต็มหน้าจอ องค์ประกอบอินเทอร์เฟซผู้ใช้ของเบราว์เซอร์และแอปพลิเคชันอื่นๆ ทั้งหมดจะถูกลบออกจากหน้าจอ
วิธีใช้ HTML5 API แบบเต็มหน้าจอ
คำนำหน้าผู้ขายที่ก่อกวน
อย่าพยายามใช้ชื่อ API เหล่านี้ คุณต้องใช้คำนำหน้าผู้ขายสำหรับพร็อพเพอร์ตี้ CSS และ JavaScript ทั้งสอง ยังไม่มีการสนับสนุนใน Internet Explorer หรือ Opera แต่ฉันขอแนะนำให้คุณใช้คำนำหน้า’ms’และ’o’สำหรับการพิสูจน์อักษรในอนาคต ฉันได้พัฒนาฟังก์ชันในหน้าสาธิตซึ่งจัดการคำนำหน้าแบบเชนานิแกนให้คุณ:
CSS
เมื่อเบราว์เซอร์เข้าสู่โหมดเต็มหน้าจอ คุณจะต้อง เพื่อเปลี่ยนสไตล์สำหรับองค์ประกอบและรายการย่อย ตัวอย่างเช่น หากโดยปกติองค์ประกอบของคุณมีความกว้าง 500px คุณจะต้องเปลี่ยนเป็น 100% เพื่อให้ใช้พื้นที่ทั้งหมดที่มี เช่น แต่คุณไม่สามารถใช้รายการตัวเลือกที่มีคำนำหน้าผู้ขายได้
HTML5 คืออะไร
HTML5 เป็นเวอร์ชันล่าสุดของ Hypertext Markup Language ซึ่งเป็นรหัสที่อธิบายหน้าเว็บ จริงๆ แล้วมีโค้ดสามประเภท: HTML ซึ่งให้โครงสร้าง, Cascading Style Sheets (CSS) ซึ่งดูแลลักษณะของสิ่งต่างๆ และ JavaScript ซึ่งทำให้สิ่งต่างๆ เกิดขึ้น
ยังมีอีกมาก ไม่มีใครเป็นเจ้าของ HTML5 คุณจึงไม่ต้องจ่ายเงินเพื่อใช้ นอกจากนี้ยังใช้งานได้กับทุกแพลตฟอร์ม เช่น แท็บเล็ต สมาร์ทโฟน เน็ตบุ๊ก โน้ตบุ๊ก อัลตร้าบุ๊ก หรือสมาร์ททีวี ตราบใดที่เบราว์เซอร์ของคุณรองรับ HTML5 มันซับซ้อนกว่านั้นเสมอ เราจะพูดถึงเรื่องนี้เพิ่มเติมในเร็วๆ นี้
คำถามที่พบบ่อย
จะเรียกใช้แบบเต็มหน้าจอใน JavaScript ได้อย่างไร
เราสามารถใช้เมธอด requestFullscreen() กับองค์ประกอบใดก็ได้ เพื่อทำให้องค์ประกอบเต็มหน้าจอ เมธอดนี้ทำการร้องขอแบบอะซิงโครนัสสำหรับองค์ประกอบที่จะแสดงในโหมดเต็มหน้าจอ
จะใช้ API แบบเต็มหน้าจอใน Javascript ได้อย่างไร
โดยการเรียก Element คุณสามารถเปลี่ยนเป็นเต็มหน้าจอ โหมด. ใช้เมธอดของ video> element’s requestFullscreen() หากโหมดเต็มหน้าจอเปิดอยู่แล้ว (fullscreenElement ไม่ใช่ null) เราจะเรียกเมธอด exitFullscreen() ของเอกสารเพื่อปิด
API แบบเต็มหน้าจอต้องได้รับอนุญาตจากผู้ใช้หรือไม่
หากต้องการเปิดใช้งานมุมมองแบบเต็มหน้าจอบนเบราว์เซอร์ของผู้ใช้ คุณจะต้องขออนุญาตจาก Element ก่อน ฟังก์ชัน requestFullScreen
แสดงจาวาสคริปต์เพียง 100 ตัวอักษรได้อย่างไร
เราสามารถใช้เมธอด substring() ได้: เมธอด substring(a, b) แยกอักขระระหว่างสองดัชนี (ตำแหน่ง a และ b ตามลำดับ) จากสตริงและส่งกลับสตริงย่อย ตัวอย่าง: ให้ข้อความ=“ฉันรักจาวาสคริปต์”; <%=ข้อความ … เราสามารถใช้เมธอดของ slice() ได้เช่นกัน: ตัวอย่าง: <%=text. แยก("").
ฉันจะบังคับให้ div ใช้ความกว้างเต็มได้อย่างไร
สิ่งที่คุณทำได้คือตั้งค่า div ให้เป็นตำแหน่ง: สัมบูรณ์ เพื่อให้ div ของคุณไม่ขึ้นกับเค้าโครงที่เหลือ จากนั้นพูดว่า width: 100% เพื่อให้เต็มความกว้างของหน้าจอ ตอนนี้เพียงแค่ใช้ margin-left: 30px (หรือ px อะไรก็ได้ที่คุณต้องการ) เท่านี้ก็เสร็จแล้ว