มอบประสบการณ์แบบเต็มหน้าจอ

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

การแสดงแอปหรือเว็บไซต์แบบเต็มหน้าจอ

ผู้ใช้หรือนักพัฒนาแอปสามารถทำให้เว็บแอปเป็นแบบเต็มหน้าจอได้หลายวิธี

  • ส่งคําขอให้เบราว์เซอร์เข้าสู่โหมดเต็มหน้าจอเพื่อตอบสนองต่อท่าทางสัมผัสของผู้ใช้
  • ติดตั้งแอปลงในหน้าจอหลัก
  • ซ่อนแถบที่อยู่โดยอัตโนมัติ

ขอให้เบราว์เซอร์เข้าสู่โหมดเต็มหน้าจอเพื่อตอบสนองต่อท่าทางสัมผัสของผู้ใช้

แพลตฟอร์มบางแพลตฟอร์มอาจไม่เหมือนกัน 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
รูปที่ 1: การแสดงผลแบบเต็มหน้าจอในองค์ประกอบเนื้อหา

คุณอาจคิดว่าการขยายองค์ประกอบ body เป็นแบบเต็มหน้าจอเป็นเรื่องปกติ แต่หากคุณใช้เครื่องมือแสดงผลแบบ WebKit หรือ Blink คุณจะเห็นผลลัพธ์ที่แปลกประหลาดของการย่อความกว้างขององค์ประกอบ body ให้เล็กที่สุดที่เป็นไปได้ซึ่งจะมีเนื้อหาทั้งหมด (Mozilla Gecko ใช้ได้)

การแสดงผลแบบเต็มหน้าจอในองค์ประกอบเอกสาร
รูปที่ 2: การแสดงผลแบบเต็มหน้าจอในองค์ประกอบเอกสาร

วิธีแก้ไขคือใช้องค์ประกอบเอกสารแทนองค์ประกอบเนื้อหา

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 จะช่วยให้คุณควบคุมแอปได้มากขึ้น แต่ตอนนี้เรามุ่งเน้นที่วิธีเปิดแอป กล่าวอย่างเจาะจงคือ

  1. การบอกเบราว์เซอร์เกี่ยวกับไฟล์ Manifest
  2. อธิบายวิธีเปิดใช้งาน

เมื่อสร้างไฟล์ 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 ตัวเลือกหากต้องการให้ผู้ใช้อยู่ในประสบการณ์แบบเต็มหน้าจอ

  1. ใช้กลไกของเว็บแอปแบบติดตั้งได้เพื่อเข้าสู่โหมดเต็มหน้าจอ
  2. จัดการ UI และสถานะแอปโดยใช้ #

เมื่อใช้ไวยากรณ์ # เพื่ออัปเดต URL (window.location = "#somestate") และรับฟังเหตุการณ์ window.onhashchange คุณจะใช้กองประวัติของเบราว์เซอร์เองเพื่อจัดการการเปลี่ยนแปลงสถานะแอปพลิเคชัน อนุญาตให้ผู้ใช้ใช้ปุ่มย้อนกลับของฮาร์ดแวร์ หรือมอบประสบการณ์การใช้งานปุ่มย้อนกลับแบบเป็นโปรแกรมอย่างง่ายได้โดยใช้ History API ดังนี้

window.history.go(-1);

อนุญาตให้ผู้ใช้เลือกเมื่อต้องการเปิดแบบเต็มหน้าจอ

ไม่มีอะไรทำให้ผู้ใช้รำคาญไปกว่าการที่เว็บไซต์ทําสิ่งที่ไม่คาดคิด เมื่อผู้ใช้ไปยังเว็บไซต์ของคุณ อย่าพยายามหลอกลวงให้ผู้ใช้เปิดใช้โหมดเต็มหน้าจอ

อย่าขัดจังหวะเหตุการณ์การแตะครั้งแรกและเรียก requestFullscreen()

  1. น่ารำคาญ
  2. เบราว์เซอร์อาจตัดสินใจแจ้งให้ผู้ใช้ทราบในอนาคตเกี่ยวกับการอนุญาตให้แอปแสดงแบบเต็มหน้าจอ

หากต้องการเปิดแอปแบบเต็มหน้าจอ ให้ลองใช้ประสบการณ์การติดตั้งสำหรับแต่ละแพลตฟอร์ม

อย่าสแปมผู้ใช้ให้ติดตั้งแอปลงในหน้าจอหลัก

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

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

บทสรุป

แม้ว่าเราจะไม่มี API ที่มาตรฐานและใช้งานได้อย่างสมบูรณ์ แต่การใช้คําแนะนําบางส่วนที่แสดงในบทความนี้จะช่วยให้คุณสร้างประสบการณ์ที่ใช้ประโยชน์จากทั้งหน้าจอของผู้ใช้ได้อย่างง่ายดาย โดยไม่คํานึงถึงไคลเอ็นต์

ความคิดเห็น