เราสามารถสร้างเว็บไซต์และแอปพลิเคชันแบบเต็มหน้าจอที่สมจริงได้อย่างง่ายดาย แต่เช่นเดียวกับสิ่งอื่นๆ ในเว็บ การสร้างเว็บไซต์และแอปพลิเคชันแบบเต็มหน้าจอนั้นทำได้หลายวิธี ซึ่งสำคัญอย่างยิ่งในตอนนี้ที่เบราว์เซอร์จำนวนมากขึ้นรองรับประสบการณ์การใช้งาน "เว็บแอปที่ติดตั้งไว้" ซึ่งเปิดแบบเต็มหน้าจอ
การแสดงแอปหรือเว็บไซต์แบบเต็มหน้าจอ
ผู้ใช้หรือนักพัฒนาแอปสามารถทำให้เว็บแอปเป็นแบบเต็มหน้าจอได้หลายวิธี
- ส่งคําขอให้เบราว์เซอร์เข้าสู่โหมดเต็มหน้าจอเพื่อตอบสนองต่อท่าทางสัมผัสของผู้ใช้
- ติดตั้งแอปลงในหน้าจอหลัก
- ซ่อนแถบที่อยู่โดยอัตโนมัติ
ขอให้เบราว์เซอร์เข้าสู่โหมดเต็มหน้าจอเพื่อตอบสนองต่อท่าทางสัมผัสของผู้ใช้
แพลตฟอร์มบางแพลตฟอร์มอาจไม่เหมือนกัน iOS Safari ไม่มี fullscreen API แต่ Chrome ใน Android, Firefox และ IE 11 ขึ้นไปมี แอปพลิเคชันส่วนใหญ่ที่คุณสร้างจะใช้ JS API ร่วมกับตัวเลือก CSS ที่ข้อกำหนดแบบเต็มหน้าจอระบุไว้ JS API หลักที่คุณต้องคำนึงถึงเมื่อสร้างประสบการณ์แบบเต็มหน้าจอมีดังนี้
element.requestFullscreen()
(ปัจจุบันมีคำนำหน้าใน Chrome, Firefox และ IE) แสดงองค์ประกอบในโหมดเต็มหน้าจอdocument.exitFullscreen()
(ปัจจุบันมีคำนำหน้าใน Chrome, Firefox และ IE Firefox ใช้cancelFullScreen()
แทน) จะยกเลิกโหมดเต็มหน้าจอdocument.fullscreenElement
(ปัจจุบันมีคำนำหน้าใน Chrome, Firefox และ IE) แสดงผลเป็น "จริง" หากองค์ประกอบใดอยู่ในโหมดเต็มหน้าจอ
เมื่อแอปแสดงแบบเต็มหน้าจอ คุณจะไม่สามารถควบคุม UI ของเบราว์เซอร์ได้อีกต่อไป ซึ่งจะเปลี่ยนวิธีที่ผู้ใช้โต้ตอบกับประสบการณ์การใช้งาน โดยไม่มีการควบคุมการนําทางมาตรฐาน เช่น ไปข้างหน้าและย้อนกลับ รวมถึงไม่มีปุ่มหนีตายอย่างปุ่มรีเฟรช คุณจึงควรเตรียมพร้อมสำหรับสถานการณ์นี้ คุณสามารถใช้ตัวเลือก CSS บางรายการเพื่อช่วยเปลี่ยนสไตล์และการแสดงผลของเว็บไซต์เมื่อเบราว์เซอร์เข้าสู่โหมดเต็มหน้าจอ
<button id="goFS">Go fullscreen</button>
<script>
var goFS = document.getElementById('goFS');
goFS.addEventListener(
'click',
function () {
document.body.requestFullscreen();
},
false,
);
</script>
ตัวอย่างข้างต้นค่อนข้างซับซ้อน เนื่องจากเราซ่อนความซับซ้อนทั้งหมดเกี่ยวกับการใช้คำนำหน้าของผู้ให้บริการไว้
โค้ดจริงมีความซับซ้อนกว่ามาก Mozilla ได้สร้างสคริปต์ที่มีประโยชน์มากซึ่งคุณใช้เพื่อสลับโหมดเต็มหน้าจอได้ ดังที่คุณเห็น สถานการณ์คำนำหน้าผู้ให้บริการมีความซับซ้อนและยุ่งยากเมื่อเทียบกับ API ที่ระบุ แม้ว่าโค้ดด้านล่างจะเรียบง่ายขึ้นเล็กน้อย แต่ก็ยังคงซับซ้อนอยู่
function toggleFullScreen() {
var doc = window.document;
var docEl = doc.documentElement;
var requestFullScreen =
docEl.requestFullscreen ||
docEl.mozRequestFullScreen ||
docEl.webkitRequestFullScreen ||
docEl.msRequestFullscreen;
var cancelFullScreen =
doc.exitFullscreen ||
doc.mozCancelFullScreen ||
doc.webkitExitFullscreen ||
doc.msExitFullscreen;
if (
!doc.fullscreenElement &&
!doc.mozFullScreenElement &&
!doc.webkitFullscreenElement &&
!doc.msFullscreenElement
) {
requestFullScreen.call(docEl);
} else {
cancelFullScreen.call(doc);
}
}
เรานักพัฒนาเว็บไม่ชอบความซับซ้อน API นามธรรมระดับสูงที่มีประโยชน์ซึ่งคุณใช้ได้คือข้อบังคับของ Screenfull.js ของ Sindre Sorhus ซึ่งรวม JS API 2 รายการและคำนำหน้าของผู้ให้บริการที่แตกต่างกันเล็กน้อยเข้าด้วยกันเป็น API ที่สอดคล้องกันเพียงรายการเดียว
เคล็ดลับเกี่ยวกับ Fullscreen API
การเปลี่ยนเอกสารเป็นแบบเต็มหน้าจอ
คุณอาจคิดว่าการขยายองค์ประกอบ body เป็นแบบเต็มหน้าจอเป็นเรื่องปกติ แต่หากคุณใช้เครื่องมือแสดงผลแบบ WebKit หรือ Blink คุณจะเห็นผลลัพธ์ที่แปลกประหลาดของการย่อความกว้างขององค์ประกอบ body ให้เล็กที่สุดที่เป็นไปได้ซึ่งจะมีเนื้อหาทั้งหมด (Mozilla Gecko ใช้ได้)
วิธีแก้ไขคือใช้องค์ประกอบเอกสารแทนองค์ประกอบเนื้อหา
document.documentElement.requestFullscreen();
การเปลี่ยนองค์ประกอบวิดีโอเป็นแบบเต็มหน้าจอ
วิธีทำให้องค์ประกอบวิดีโอเป็นแบบเต็มหน้าจอนั้นเหมือนกับวิธีทำให้องค์ประกอบอื่นๆ เป็นแบบเต็มหน้าจอทุกประการ คุณเรียกใช้เมธอด requestFullscreen
ในองค์ประกอบวิดีโอ
<video id="videoElement"></video>
<button id="goFS">Go Fullscreen</button>
<script>
var goFS = document.getElementById('goFS');
goFS.addEventListener(
'click',
function () {
var videoElement = document.getElementById('videoElement');
videoElement.requestFullscreen();
},
false,
);
</script>
หากองค์ประกอบ <video>
ไม่ได้กําหนดแอตทริบิวต์ controls ไว้ ผู้ใช้จะควบคุมวิดีโอไม่ได้เมื่อวิดีโอเล่นแบบเต็มหน้าจอ วิธีที่เราแนะนำคือให้มีคอนเทนเนอร์พื้นฐานที่รวมวิดีโอและการควบคุมที่คุณต้องการให้ผู้ใช้เห็น
<div id="container">
<video></video>
<div>
<button>Play</button>
<button>Stop</button>
<button id="goFS">Go fullscreen</button>
</div>
</div>
<script>
var goFS = document.getElementById('goFS');
goFS.addEventListener(
'click',
function () {
var container = document.getElementById('container');
container.requestFullscreen();
},
false,
);
</script>
วิธีนี้ช่วยให้คุณมีความยืดหยุ่นมากขึ้น เนื่องจากคุณสามารถรวมออบเจ็กต์คอนเทนเนอร์เข้ากับตัวเลือกเสมือน CSS ได้ (เช่น เพื่อซ่อนปุ่ม "goFS")
<style>
#goFS:-webkit-full-screen #goFS {
display: none;
}
#goFS:-moz-full-screen #goFS {
display: none;
}
#goFS:-ms-fullscreen #goFS {
display: none;
}
#goFS:fullscreen #goFS {
display: none;
}
</style>
การใช้รูปแบบเหล่านี้จะช่วยให้คุณตรวจจับได้ว่าโหมดเต็มหน้าจอทำงานอยู่หรือไม่ และปรับอินเทอร์เฟซผู้ใช้ให้เหมาะสมได้ เช่น
- ด้วยการระบุลิงก์กลับไปยังหน้าแรก
- โดยให้กลไกในการปิดกล่องโต้ตอบหรือย้อนกลับ
การเปิดหน้าเว็บแบบเต็มหน้าจอจากหน้าจอหลัก
ไม่สามารถเปิดหน้าเว็บแบบเต็มหน้าจอเมื่อผู้ใช้ไปยังหน้าเว็บนั้น ผู้ให้บริการเบราว์เซอร์ทราบดีว่าการโหลดหน้าเว็บแบบเต็มหน้าจอทุกครั้งเป็นประสบการณ์ที่สร้างความรำคาญอย่างมาก ดังนั้นจึงกำหนดให้ผู้ใช้ต้องใช้ท่าทางสัมผัสเพื่อเข้าสู่โหมดเต็มหน้าจอ อย่างไรก็ตาม ผู้ให้บริการอนุญาตให้ผู้ใช้ "ติดตั้ง" แอปได้ และการดำเนินการติดตั้งจะเป็นสัญญาณให้ระบบปฏิบัติการทราบว่าผู้ใช้ต้องการเปิดแอปบนแพลตฟอร์ม
แพลตฟอร์มอุปกรณ์เคลื่อนที่หลักๆ ใช้งานได้ง่ายโดยใช้เมตาแท็กหรือไฟล์ Manifest ดังนี้
iOS
ตั้งแต่เปิดตัว iPhone ผู้ใช้สามารถติดตั้งเว็บแอปลงในหน้าจอหลักและเปิดเว็บแอปแบบเต็มหน้าจอได้
<meta name="apple-mobile-web-app-capable" content="yes" />
หากตั้งค่าเนื้อหาเป็น "ใช่" เว็บแอปพลิเคชันจะทำงานในโหมดเต็มหน้าจอ หากตั้งค่าเป็น "ไม่" เว็บแอปพลิเคชันจะไม่ทำงานในโหมดเต็มหน้าจอ ลักษณะการทำงานเริ่มต้นคือการใช้ Safari เพื่อแสดงเนื้อหาเว็บ คุณระบุได้ว่าหน้าเว็บแสดงในโหมดเต็มหน้าจอหรือไม่โดยใช้พร็อพเพอร์ตี้ JavaScript แบบบูลีนแบบอ่านอย่างเดียว window.navigator.standalone
Apple
Chrome สำหรับแอนดรอยด์
เมื่อเร็วๆ นี้ทีม Chrome ได้ติดตั้งใช้งานฟีเจอร์ที่บอกให้เบราว์เซอร์เปิดหน้าเว็บแบบเต็มหน้าจอเมื่อผู้ใช้เพิ่มหน้าเว็บนั้นลงในหน้าจอหลัก ซึ่งคล้ายกับรูปแบบของ Safari ใน iOS
<meta name="mobile-web-app-capable" content="yes" />
คุณสามารถตั้งค่าเว็บแอปให้เพิ่มไอคอนทางลัดของแอปพลิเคชันลงในหน้าจอหลักของอุปกรณ์ และทำให้แอปเปิดใน "โหมดแอป" แบบเต็มหน้าจอได้โดยใช้รายการเมนู "เพิ่มลงในหน้าจอหลัก" ของ Chrome สำหรับ Android
Google Chrome
ตัวเลือกที่ดีกว่าคือการใช้ไฟล์ Manifest ของเว็บแอป
ไฟล์ Manifest ของแอปบนเว็บ (Chrome, Opera, Firefox, Samsung)
ไฟล์ Manifest สําหรับเว็บแอปพลิเคชันเป็นไฟล์ JSON ง่ายๆ ที่ช่วยให้คุณในฐานะนักพัฒนาแอปควบคุมลักษณะที่แอปปรากฏต่อผู้ใช้ในพื้นที่ที่ผู้ใช้คาดหวังว่าจะเห็นแอป (เช่น หน้าจอหลักของอุปกรณ์เคลื่อนที่) กำหนดสิ่งที่ผู้ใช้จะเปิดได้ และที่สำคัญกว่านั้นคือวิธีเปิดแอป ในอนาคตไฟล์ Manifest จะช่วยให้คุณควบคุมแอปได้มากขึ้น แต่ตอนนี้เรามุ่งเน้นที่วิธีเปิดแอป กล่าวอย่างเจาะจงคือ
- การบอกเบราว์เซอร์เกี่ยวกับไฟล์ Manifest
- อธิบายวิธีเปิดใช้งาน
เมื่อสร้างไฟล์ Manifest แล้วและโฮสต์ไฟล์ดังกล่าวในเว็บไซต์ สิ่งที่คุณต้องทำคือเพิ่มแท็กลิงก์จากทุกหน้าเว็บที่รวมแอปของคุณไว้ ดังนี้
<link rel="manifest" href="/manifest.json" />
Chrome รองรับไฟล์ Manifest ตั้งแต่เวอร์ชัน 38 สำหรับ Android (ตุลาคม 2014) และช่วยให้คุณควบคุมลักษณะที่เว็บแอปปรากฏเมื่อติดตั้งลงในหน้าจอหลัก (ผ่านพร็อพเพอร์ตี้ short_name
, name
และ icons
) และวิธีที่ควรเปิดใช้งานเมื่อผู้ใช้คลิกไอคอนเปิด (ผ่าน start_url
, display
และ orientation
)
ตัวอย่างไฟล์ Manifest แสดงอยู่ด้านล่าง แต่ไม่แสดงทุกอย่างที่ใส่ไว้ในไฟล์ Manifest ได้
{
"short_name": "Kinlan's Amaze App",
"name": "Kinlan's Amazing Application ++",
"icons": [
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"orientation": "landscape"
}
ฟีเจอร์นี้เป็นแบบก้าวหน้าทั้งหมดและช่วยให้คุณสร้างประสบการณ์การใช้งานที่ดีขึ้นและผสานรวมมากขึ้นให้แก่ผู้ใช้เบราว์เซอร์ที่รองรับฟีเจอร์นี้
เมื่อผู้ใช้เพิ่มเว็บไซต์หรือแอปลงในหน้าจอหลัก แสดงว่าผู้ใช้มีเจตนาที่จะใช้เว็บไซต์หรือแอปนั้นเสมือนเป็นแอป ซึ่งหมายความว่าคุณควรมุ่งนําผู้ใช้ไปยังฟังก์ชันการทํางานของแอปแทนหน้า Landing Page ของผลิตภัณฑ์ ตัวอย่างเช่น หากผู้ใช้ต้องลงชื่อเข้าใช้แอป หน้าดังกล่าวก็เหมาะที่จะเปิดตัว
แอปยูทิลิตี
แอปยูทิลิตีส่วนใหญ่จะได้รับประโยชน์จากการเปลี่ยนแปลงนี้ทันที สําหรับแอปเหล่านั้น คุณอาจต้องการเปิดตัวแอปแบบสแตนด์อโลนเช่นเดียวกับแอปอื่นๆ ทั้งหมดบนแพลตฟอร์มอุปกรณ์เคลื่อนที่ หากต้องการบอกให้แอปเปิดแบบสแตนด์อโลน ให้เพิ่มข้อมูลต่อไปนี้ลงในไฟล์ Manifest ของเว็บแอป
"display": "standalone"
เกม
เกมส่วนใหญ่จะได้รับประโยชน์จากไฟล์ Manifest ทันที เกมส่วนใหญ่ต้องการเปิดแบบเต็มหน้าจอและบังคับให้ใช้การวางแนวที่เจาะจง
หากคุณกำลังพัฒนาเกมแนวตั้งหรือเกมอย่าง Flappy Birds คุณก็น่าจะต้องการให้เกมอยู่ในโหมดแนวตั้งเสมอ
"display": "fullscreen",
"orientation": "portrait"
ในทางกลับกัน หากคุณกำลังสร้างเกมไขปริศนาหรือเกมอย่าง X-Com คุณอาจต้องการให้เกมใช้การวางแนวนอนเสมอ
"display": "fullscreen",
"orientation": "landscape"
เว็บไซต์ข่าว
ในกรณีส่วนใหญ่ เว็บไซต์ข่าวเป็นประสบการณ์การใช้งานที่เน้นเนื้อหาล้วนๆ นักพัฒนาซอฟต์แวร์ส่วนใหญ่ย่อมไม่คิดที่จะเพิ่มไฟล์ Manifest ลงในเว็บไซต์ข่าว ไฟล์ Manifest จะช่วยให้คุณกำหนดสิ่งที่จะเปิด (หน้าแรกของเว็บไซต์ข่าว) และวิธีเปิด (แบบเต็มหน้าจอหรือเป็นแท็บเบราว์เซอร์ปกติ) ได้
ตัวเลือกนี้ขึ้นอยู่กับคุณและวิธีที่คุณคิดว่าผู้ใช้ต้องการเข้าถึงประสบการณ์การใช้งาน หากต้องการให้เว็บไซต์มีแถบเบราว์เซอร์ทั้งหมดที่คุณต้องการให้เว็บไซต์มี ให้ตั้งค่าการแสดงผลเป็น browser
"display": "browser"
หากต้องการให้เว็บไซต์ข่าวของคุณให้ความรู้สึกเหมือนแอปส่วนใหญ่ที่เน้นข่าว ซึ่งจะแสดงประสบการณ์การใช้งานเป็นแอปและนำ Chrome ที่เหมือนเว็บทั้งหมดออกจาก UI คุณก็ทำได้โดยการตั้งค่าการแสดงผลเป็น standalone
"display": "standalone"
ซ่อนแถบที่อยู่โดยอัตโนมัติ
คุณ "จำลองโหมดเต็มหน้าจอ" ได้โดยซ่อนแถบที่อยู่โดยอัตโนมัติ ดังนี้
window.scrollTo(0, 1);
วิธีนี้ค่อนข้างง่าย หน้าเว็บจะโหลดและระบบจะบอกให้แถบเบราว์เซอร์ออกไป แต่น่าเสียดายที่ยังไม่มีมาตรฐานและไม่รองรับ นอกจากนี้ คุณยังต้องแก้ปัญหาเล็กๆ น้อยๆ อีกมากมาย
เช่น เบราว์เซอร์มักจะคืนค่าตำแหน่งในหน้าเว็บเมื่อผู้ใช้ไปยังหน้านั้นอีกครั้ง การใช้ window.scrollTo
จะลบล้างค่านี้ ซึ่งทำให้ผู้ใช้ไม่พอใจ วิธีแก้ปัญหานี้คือคุณต้องจัดเก็บตำแหน่งสุดท้ายใน localStorage และจัดการกับกรณีขอบ (เช่น หากผู้ใช้เปิดหน้าเว็บในหลายหน้าต่าง)
หลักเกณฑ์ UX
เมื่อสร้างเว็บไซต์ที่ใช้ประโยชน์จากหน้าจอแบบเต็ม คุณควรตระหนักถึงการเปลี่ยนแปลงประสบการณ์ของผู้ใช้ที่อาจเกิดขึ้นเพื่อที่จะสร้างบริการที่ผู้ใช้ชื่นชอบ
อย่าพึ่งพาตัวควบคุมการนําทาง
iOS ไม่มีปุ่มย้อนกลับแบบฮาร์ดแวร์หรือท่าทางสัมผัสเพื่อรีเฟรช ดังนั้นคุณต้องตรวจสอบว่าผู้ใช้ไปยังส่วนต่างๆ ของแอปได้โดยไม่ถูกล็อก
คุณสามารถตรวจจับได้ว่าคุณกำลังใช้งานในโหมดเต็มหน้าจอหรือโหมดที่ติดตั้งไว้อย่างง่ายดายในทุกแพลตฟอร์มหลัก
iOS
ใน iOS คุณสามารถใช้บูลีน navigator.standalone
เพื่อดูว่าผู้ใช้เปิดแอปจากหน้าจอหลักหรือไม่
if (navigator.standalone == true) {
// My app is installed and therefore fullscreen
}
ไฟล์ Manifest ของเว็บแอป (Chrome, Opera, Samsung)
เมื่อเปิดเป็นแอปที่ติดตั้ง Chrome จะไม่ทํางานในโหมดเต็มหน้าจอจริง document.fullscreenElement
จึงแสดงผลเป็นค่าว่างและตัวเลือก CSS จะไม่ทํางาน
เมื่อผู้ใช้ส่งคำขอแบบเต็มหน้าจอผ่านท่าทางสัมผัสในเว็บไซต์ของคุณ ระบบจะใช้ API แบบเต็มหน้าจอมาตรฐาน รวมถึงตัวเลือกเสมือน CSS ที่ช่วยให้คุณปรับ UI ให้ตอบสนองต่อสถานะแบบเต็มหน้าจอได้ ดังนี้
selector:-webkit-full-screen {
display: block; // displays the element only when in fullscreen
}
selector {
display: none; // hides the element when not in fullscreen mode
}
หากผู้ใช้เปิดเว็บไซต์ของคุณจากหน้าจอหลัก ระบบจะตั้งค่าการค้นหา display-mode
media
เป็นค่าที่กําหนดไว้ในไฟล์ Manifest ของเว็บแอป ในกรณีของโหมดเต็มหน้าจอล้วน จะเป็นดังนี้
@media (display-mode: fullscreen) {
}
หากผู้ใช้เปิดแอปพลิเคชันในโหมดสแตนด์อโลน display-mode
ข้อความค้นหาสื่อจะเป็นstandalone
@media (display-mode: standalone) {
}
Firefox
เมื่อผู้ใช้ส่งคำขอแบบเต็มหน้าจอผ่านเว็บไซต์หรือผู้ใช้เปิดแอปในโหมดเต็มหน้าจอ API แบบเต็มหน้าจอมาตรฐานทั้งหมดจะพร้อมใช้งาน รวมถึงตัวเลือกเสมือน CSS ซึ่งช่วยให้คุณปรับ UI ให้ตอบสนองต่อสถานะแบบเต็มหน้าจอได้ ดังนี้
selector:-moz-full-screen {
display: block; // hides the element when not in fullscreen mode
}
selector {
display: none; // hides the element when not in fullscreen mode
}
Internet Explorer
ใน IE คลาสสมมติ CSS จะไม่มีขีดกลาง แต่ทำงานคล้ายกับ Chrome และ Firefox
selector:-ms-fullscreen {
display: block;
}
selector {
display: none; // hides the element when not in fullscreen mode
}
ข้อมูลจำเพาะ
การสะกดคำในข้อกำหนดตรงกับไวยากรณ์ที่ IE ใช้
selector:fullscreen {
display: block;
}
selector {
display: none; // hides the element when not in fullscreen mode
}
คงให้ผู้ใช้อยู่ในประสบการณ์แบบเต็มหน้าจอ
API แบบเต็มหน้าจออาจทำงานไม่ถูกต้องในบางครั้ง ผู้ให้บริการเบราว์เซอร์ไม่ต้องการล็อกผู้ใช้ไว้ในหน้าแบบเต็มหน้าจอ จึงพัฒนากลไกในการออกจากโหมดเต็มหน้าจอโดยเร็วที่สุด ซึ่งหมายความว่าคุณจะสร้างเว็บไซต์แบบเต็มหน้าจอที่ครอบคลุมหลายหน้าไม่ได้เนื่องจากเหตุผลต่อไปนี้
- การเปลี่ยน URL โดยใช้โปรแกรมโดยใช้
window.location = "http://example.com"
จะออกจากโหมดเต็มหน้าจอ - ผู้ใช้ที่คลิกลิงก์ภายนอกในหน้าเว็บจะออกจากโหมดเต็มหน้าจอ
- การเปลี่ยน URL ผ่าน
navigator.pushState
API จะออกจากประสบการณ์การใช้งานแบบเต็มหน้าจอด้วย
คุณมี 2 ตัวเลือกหากต้องการให้ผู้ใช้อยู่ในประสบการณ์แบบเต็มหน้าจอ
- ใช้กลไกของเว็บแอปแบบติดตั้งได้เพื่อเข้าสู่โหมดเต็มหน้าจอ
- จัดการ UI และสถานะแอปโดยใช้ #
เมื่อใช้ไวยากรณ์ # เพื่ออัปเดต URL (window.location = "#somestate") และรับฟังเหตุการณ์ window.onhashchange
คุณจะใช้กองประวัติของเบราว์เซอร์เองเพื่อจัดการการเปลี่ยนแปลงสถานะแอปพลิเคชัน อนุญาตให้ผู้ใช้ใช้ปุ่มย้อนกลับของฮาร์ดแวร์ หรือมอบประสบการณ์การใช้งานปุ่มย้อนกลับแบบเป็นโปรแกรมอย่างง่ายได้โดยใช้ History API ดังนี้
window.history.go(-1);
อนุญาตให้ผู้ใช้เลือกเมื่อต้องการเปิดแบบเต็มหน้าจอ
ไม่มีอะไรทำให้ผู้ใช้รำคาญไปกว่าการที่เว็บไซต์ทําสิ่งที่ไม่คาดคิด เมื่อผู้ใช้ไปยังเว็บไซต์ของคุณ อย่าพยายามหลอกลวงให้ผู้ใช้เปิดใช้โหมดเต็มหน้าจอ
อย่าขัดจังหวะเหตุการณ์การแตะครั้งแรกและเรียก requestFullscreen()
- น่ารำคาญ
- เบราว์เซอร์อาจตัดสินใจแจ้งให้ผู้ใช้ทราบในอนาคตเกี่ยวกับการอนุญาตให้แอปแสดงแบบเต็มหน้าจอ
หากต้องการเปิดแอปแบบเต็มหน้าจอ ให้ลองใช้ประสบการณ์การติดตั้งสำหรับแต่ละแพลตฟอร์ม
อย่าสแปมผู้ใช้ให้ติดตั้งแอปลงในหน้าจอหลัก
หากคุณวางแผนที่จะมอบประสบการณ์การใช้งานแบบเต็มหน้าจอผ่านกลไกของแอปที่ติดตั้งไว้ โปรดคำนึงถึงผู้ใช้
- ระมัดระวัง ใช้แบนเนอร์หรือส่วนท้ายเพื่อแจ้งให้ผู้ใช้ทราบว่าสามารถติดตั้งแอปได้
- หากผู้ใช้ปิดข้อความแจ้ง โปรดอย่าแสดงข้อความแจ้งนั้นอีก
- ในการเข้าชมครั้งแรก ผู้ใช้อาจไม่ต้องการติดตั้งแอป เว้นแต่ว่าผู้ใช้จะพึงพอใจกับบริการของคุณ ลองแจ้งให้ผู้ใช้ติดตั้งหลังจากการโต้ตอบเชิงบวกในเว็บไซต์
- หากผู้ใช้เข้าชมเว็บไซต์ของคุณเป็นประจำแต่ไม่ได้ติดตั้งแอป แสดงว่าผู้ใช้รายนั้นไม่น่าจะติดตั้งแอปในอนาคต อย่าส่งสแปมถึงพวกเขา
บทสรุป
แม้ว่าเราจะไม่มี API ที่มาตรฐานและใช้งานได้อย่างสมบูรณ์ แต่การใช้คําแนะนําบางส่วนที่แสดงในบทความนี้จะช่วยให้คุณสร้างประสบการณ์ที่ใช้ประโยชน์จากทั้งหน้าจอของผู้ใช้ได้อย่างง่ายดาย โดยไม่คํานึงถึงไคลเอ็นต์