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

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

การทำให้แอปหรือเว็บไซต์ของคุณเต็มหน้าจอ

ผู้ใช้หรือนักพัฒนาซอฟต์แวร์จะเปิดเว็บแอปแบบเต็มหน้าจอได้หลายวิธี

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

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

แต่ละแพลตฟอร์มไม่ได้เท่าเทียมกัน iOS Safari ไม่มี 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 ระดับสูงที่น่าใช้ เป็นโมดูล Sindre Sorhus' Screenfull.js ซึ่งจะรวมคำนำหน้า JS API และผู้ให้บริการที่แตกต่างกันเล็กน้อยทั้งสองเข้าด้วยกันเป็นคำนำหน้าเดียว API ที่สอดคล้องกัน

เคล็ดลับ API แบบเต็มหน้าจอ

กำลังทำให้เอกสารเต็มหน้าจอ

วันที่

เป็นเรื่องปกติที่จะคิดว่าคุณใช้องค์ประกอบ ของร่างกายในโหมดเต็มหน้าจอ แต่ถ้า ในเครื่องมือแสดงภาพแบบ WebKit หรือ Blink คุณจะเห็นได้ว่า ส่งผลแปลกๆ กับ ลดขนาดความกว้างของร่างกายให้เหลือน้อยที่สุด เนื้อหา (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> ไม่ได้กำหนดแอตทริบิวต์การควบคุมไว้ ผู้ใช้จะควบคุมวิดีโอไม่ได้เมื่อวิดีโออยู่ในโหมดเต็มหน้าจอ วิธีที่แนะนำในการทำเช่นนี้คือให้มีคอนเทนเนอร์พื้นฐานที่รวมวิดีโอและ การควบคุมที่ต้องการให้ผู้ใช้เห็น

<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 เพื่อแสดงเว็บ เนื้อหา คุณสามารถกำหนดว่าหน้าเว็บจะแสดงแบบเต็มหน้าจอหรือไม่ โดยใช้คุณสมบัติ window.navigator.standalone JavaScript แบบอ่านอย่างเดียว

Apple

Chrome สำหรับแอนดรอยด์

เมื่อเร็วๆ นี้ ทีม Chrome ได้นำฟีเจอร์ที่แจ้งให้เบราว์เซอร์ เปิดโหมดเต็มหน้าจอเมื่อผู้ใช้เพิ่มหน้านั้นลงในหน้าจอหลัก ใช่เลย คล้ายกับโมเดล iOS Safari

<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 จะให้คุณกำหนดว่าจะนำเสนออะไร (หน้าแรกของเว็บไซต์ข่าวของคุณ) และ วิธีเปิดแอป (เต็มหน้าจอหรือแบบแท็บเบราว์เซอร์ปกติ)

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

    "display": "browser"

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

    "display": "standalone"

ปลอม: ซ่อนแถบที่อยู่โดยอัตโนมัติ

คุณทำ "เต็มหน้าจอปลอม" ได้ ด้วยการซ่อนแถบที่อยู่อัตโนมัติ ดังนี้

window.scrollTo(0, 1);

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

ตัวอย่างเช่น เบราว์เซอร์มักจะคืนค่าตำแหน่งบนหน้าเว็บเมื่อผู้ใช้ ย้อนกลับไปยังที่นั้น การใช้ window.scrollTo จะลบล้างค่านี้ ซึ่งทำให้รู้สึกไม่พอใจ ผู้ใช้รายนั้น ในการแก้ปัญหานี้ คุณต้องจัดเก็บตำแหน่งสุดท้ายไว้ localStorage และจัดการกับกรณี Edge (ตัวอย่างเช่น หากผู้ใช้มี หน้าที่เปิดอยู่หลายหน้าต่าง)

หลักเกณฑ์ UX

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

อย่าใช้ตัวควบคุมการนำทาง

iOS ไม่มีปุ่มย้อนกลับแบบฮาร์ดแวร์หรือท่าทางสัมผัสการรีเฟรช ดังนั้นคุณต้อง เพื่อช่วยให้ผู้ใช้ไปยังส่วนต่างๆ ของแอปได้โดยไม่ถูกล็อก

คุณสามารถตรวจจับได้ว่าคุณกำลังทำงานในโหมดเต็มหน้าจอหรือโหมดที่ติดตั้ง ได้อย่างง่ายดายในทุกแพลตฟอร์มหลัก

iOS

ใน iOS คุณสามารถใช้บูลีน navigator.standalone เพื่อดูว่าผู้ใช้ เปิดใช้งานจากหน้าจอหลักหรือไม่

if (navigator.standalone == true) {
  // My app is installed and therefore fullscreen
}

ไฟล์ Manifest ของเว็บแอป (Chrome, Opera, Samsung)

เมื่อเปิดตัวเป็นแอปที่ติดตั้ง Chrome ไม่ทำงานแบบเต็มหน้าจอ ประสบการณ์เพื่อให้ document.fullscreenElement แสดงผล Null และตัวเลือก 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 ระบบจะตั้งค่าการค้นหาตามที่กำหนดไว้ในไฟล์ 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 และสถานะแอปโดยใช้ส่วนย่อย #

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

window.history.go(-1);

ให้ผู้ใช้เลือกเวลาที่ต้องการแสดงแบบเต็มหน้าจอ

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

อย่าดักจับกิจกรรมการสัมผัสครั้งแรกและโทรหา requestFullscreen()

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

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

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

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

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

บทสรุป

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

ความคิดเห็น