Trang này được dịch bởi Cloud Translation API.

Tạo trải nghiệm toàn màn hình

Chúng tôi có thể dễ dàng tạo ra các trang web sống động ở chế độ toàn màn hình và ứng dụng nhưng cũng giống như mọi thứ trên web, có một vài cách để thực hiện điều đó. Điều này đặc biệt quan trọng hiện nay khi có nhiều trình duyệt hơn đang hỗ trợ lệnh "Cài đặt" ứng dụng web" để mở chế độ toàn màn hình.

Đặt ứng dụng hoặc trang web ở chế độ toàn màn hình

Có một số cách để người dùng hoặc nhà phát triển có thể tải một ứng dụng web ở chế độ toàn màn hình.

Yêu cầu trình duyệt chuyển sang chế độ toàn màn hình để phản hồi một cử chỉ của người dùng.
Cài đặt ứng dụng vào màn hình chính.
Giả mạo: tự động ẩn thanh địa chỉ.

Yêu cầu trình duyệt chuyển sang chế độ toàn màn hình để phản hồi cử chỉ của người dùng

Không phải tất cả các nền tảng đều như nhau. Safari dành cho iOS không có API toàn màn hình, nhưng chúng tôi có trên Chrome trên Android, Firefox và IE 11 trở lên. Hầu hết ứng dụng bạn tạo sẽ sử dụng tổ hợp API JS và bộ chọn CSS trong quy cách toàn màn hình cung cấp. Chính API JS mà bạn cần quan tâm khi xây dựng trải nghiệm toàn màn hình là:

element.requestFullscreen() (hiện có tiền tố là Chrome, Firefox và IE) hiển thị phần tử ở chế độ toàn màn hình.
document.exitFullscreen() (hiện có tiền tố trong Chrome, Firefox và IE. Firefox sử dụng cancelFullScreen()) sẽ huỷ chế độ toàn màn hình.
document.fullscreenElement (hiện có tiền tố trong Chrome, Firefox và IE) trả về true nếu bất kỳ phần tử nào ở chế độ toàn màn hình.

Khi ứng dụng của bạn ở chế độ toàn màn hình, bạn sẽ không còn thành phần điều khiển trên giao diện người dùng của trình duyệt nữa có sẵn cho bạn. Điều này làm thay đổi cách người dùng tương tác với của bạn. Chúng không có các nút điều khiển điều hướng tiêu chuẩn, chẳng hạn như nút Chuyển tiếp và Lùi lại; họ không có lối thoát, đó là nút Làm mới. Bây giờ rất quan trọng để phục vụ cho trường hợp này. Bạn có thể sử dụng một số bộ chọn CSS để giúp bạn thay đổi kiểu và cách trình bày của trang web khi trình duyệt truy cập chế độ toàn màn hình.

<button id="goFS">Go fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      document.body.requestFullscreen();
    },
    false,
  );
</script>

Ví dụ trên hơi bị bóp méo; Tôi đã giấu đi tất cả những điều phức tạp việc sử dụng tiền tố của nhà cung cấp.

Mã thực tế phức tạp hơn nhiều. Mozilla đã tạo một tập lệnh rất hữu ích mà bạn có thể dùng để chuyển đổi sang chế độ toàn màn hình. Như mà bạn có thể thấy, tình huống tiền tố nhà cung cấp rất phức tạp và cồng kềnh so với API đã chỉ định. Ngay cả với mã được đơn giản hoá một chút bên dưới, vẫn còn phức tạp.

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);
  }
}

Các nhà phát triển web chúng tôi ghét sự phức tạp. Một API trừu tượng cấp cao thú vị mà bạn có thể sử dụng là mô-đun Screenfull.js của Sindre Sorhus giúp hợp nhất hai tiền tố của API JS và tiền tố của nhà cung cấp hơi khác nhau thành một API nhất quán.

Mẹo về API toàn màn hình

Đang chuyển tài liệu sang chế độ toàn màn hình

Chế độ toàn màn hình trên phần tử nội dung — Hình 1: Toàn màn hình trên phần tử nội dung.

Thường thì chúng ta nghĩ rằng bạn chụp thành phần cơ thể ở chế độ toàn màn hình, nhưng nếu bạn trên công cụ hiển thị dựa trên WebKit hoặc Blink, bạn sẽ thấy công cụ này có hiệu ứng kỳ lạ việc co lại chiều rộng cơ thể xuống kích thước nhỏ nhất có thể chứa tất cả nội dung. (Không hoạt động với Mozilla Gecko.)

Chế độ toàn màn hình trên phần tử tài liệu — Hình 2: Chế độ toàn màn hình trên thành phần tài liệu.

Để khắc phục vấn đề này, hãy sử dụng phần tử tài liệu thay vì phần tử nội dung:

document.documentElement.requestFullscreen();

Đặt thành phần video ở chế độ toàn màn hình

Việc tạo một thành phần video ở chế độ toàn màn hình cũng giống như việc tạo bất kỳ thành phần nào khác chế độ toàn màn hình của phần tử. Bạn gọi phương thức requestFullscreen trên video .

<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>

Nếu phần tử <video> của bạn chưa xác định thuộc tính điều khiển, không có cách nào để người dùng kiểm soát video khi họ ở chế độ toàn màn hình. Chiến lược phát hành đĩa đơn bạn nên dùng một vùng chứa cơ bản bao bọc video các chế độ cài đặt mà bạn muốn người dùng thấy.

<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>

Điều này mang lại cho bạn tính linh hoạt hơn rất nhiều vì bạn có thể kết hợp vùng chứa có bộ chọn giả CSS (ví dụ: để ẩn nút "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>

Bằng cách sử dụng các mẫu này, bạn có thể phát hiện thời điểm chế độ toàn màn hình đang chạy và điều chỉnh giao diện người dùng một cách phù hợp, ví dụ:

Bằng cách cung cấp một đường liên kết quay lại trang chủ
Bằng cách cung cấp cơ chế đóng hộp thoại hoặc di chuyển ngược lại

Mở chế độ toàn màn hình của trang từ màn hình chính

Không thể khởi chạy trang web ở chế độ toàn màn hình khi người dùng di chuyển đến trang web đó. Các nhà cung cấp trình duyệt biết rõ rằng trải nghiệm toàn màn hình trên mỗi lượt tải trang là rất bất tiện, do đó cần phải có cử chỉ của người dùng để chuyển sang chế độ toàn màn hình. Nhà cung cấp cho phép người dùng "cài đặt" ứng dụng và hành động cài đặt là một tín hiệu cho hệ điều hành rằng người dùng muốn khởi chạy dưới dạng một ứng dụng trên chủ.

Trên các nền tảng di động lớn, việc triển khai khá dễ dàng bằng thẻ meta hoặc tệp kê khai như sau.

iOS

Kể từ khi iPhone ra mắt, người dùng đã có thể cài đặt Ứng dụng web để màn hình chính và khởi chạy chúng dưới dạng ứng dụng web toàn màn hình.

<meta name="apple-mobile-web-app-capable" content="yes" />

Nếu nội dung được đặt thành có, ứng dụng web sẽ chạy ở chế độ toàn màn hình; nếu không thì không. Hành vi mặc định là sử dụng Safari để hiển thị trang web nội dung. Bạn có thể xác định liệu trang web có được hiển thị ở chế độ toàn màn hình hay không bằng cách sử dụng thuộc tính JavaScript Boolean chỉ đọc window.navigator.audience.
Apple

Chrome dành cho Android

Nhóm Chrome gần đây đã triển khai một tính năng yêu cầu trình duyệt biết mở trang ở chế độ toàn màn hình khi người dùng đã thêm trang vào màn hình chính. Đó là tương tự như mô hình Safari trên iOS.

<meta name="mobile-web-app-capable" content="yes" />

Bạn có thể thiết lập ứng dụng web để thêm biểu tượng lối tắt ứng dụng vào màn hình chính của thiết bị và khởi chạy ứng dụng ở "chế độ ứng dụng" toàn màn hình đang sử dụng "Thêm vào màn hình chính" của Chrome dành cho Android mục trong trình đơn.
Google Chrome

Một lựa chọn phù hợp hơn là sử dụng Tệp kê khai ứng dụng web.

Tệp kê khai ứng dụng web (Chrome, Opera, Firefox, Samsung)

Tệp kê khai cho các ứng dụng web là một tệp JSON đơn giản cung cấp cho bạn nhà phát triển, khả năng kiểm soát cách ứng dụng của bạn hiển thị cho người dùng ở những khu vực họ muốn thấy các ứng dụng (ví dụ: màn hình chính của thiết bị di động), trực tiếp những gì người dùng có thể khởi chạy và quan trọng hơn là làm cách nào để họ có thể chạy những tính năng đó. Trong trong tương lai, tệp kê khai sẽ cung cấp cho bạn nhiều quyền kiểm soát hơn nữa đối với ứng dụng của bạn, nhưng ngay bây giờ chúng tôi chỉ tập trung vào cách ra mắt ứng dụng của bạn. Cụ thể:

Thông báo cho trình duyệt về tệp kê khai của bạn
Mô tả cách triển khai

Sau khi tạo tệp kê khai và lưu trữ tệp đó trên trang web của bạn, bạn chỉ cần việc cần làm là thêm một thẻ liên kết từ tất cả các trang bao gồm ứng dụng của bạn như sau:

<link rel="manifest" href="/manifest.json" />

Chrome đã hỗ trợ Tệp kê khai kể từ phiên bản 38 cho Android (tháng 10 năm 2014) đồng thời giúp bạn kiểm soát cách ứng dụng web của mình xuất hiện khi được cài đặt vào màn hình chính (thông qua các thuộc tính short_name, name và icons) cũng như cách sẽ được khởi chạy khi người dùng nhấp vào biểu tượng khởi chạy (thông qua start_url, display và orientation).

Tệp kê khai mẫu được hiển thị bên dưới. Nó không hiển thị mọi thứ có thể trong một tệp kê khai.

{
  "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"
}

Tính năng này hoàn toàn tiến bộ và cho phép bạn tạo nhiều video hay hơn, nhiều hơn cho người dùng trình duyệt có hỗ trợ tính năng này.

Khi người dùng thêm trang web hoặc ứng dụng của bạn vào màn hình chính, thì có ý định của để người dùng xem ứng dụng đó như một ứng dụng. Điều này có nghĩa là bạn nên hướng người dùng đến chức năng của ứng dụng thay vì một trang đích của sản phẩm. Ví dụ: nếu người dùng được yêu cầu đăng nhập vào ứng dụng của bạn, thì đó là một trang tốt để ra mắt.

Ứng dụng tiện ích

Phần lớn các ứng dụng tiện ích sẽ được hưởng lợi ngay lập tức. Dành cho những người đó bạn có thể sẽ muốn chúng phát hành độc lập giống như mọi ứng dụng khác trên nền tảng di động. Để yêu cầu một ứng dụng khởi chạy độc lập, hãy thêm nút này Tệp kê khai ứng dụng:

    "display": "standalone"

Trò chơi

Phần lớn trò chơi sẽ hưởng lợi ngay lập tức từ tệp kê khai. Khoảng không quảng cáo rộng lớn đa số trò chơi đều muốn chạy chế độ toàn màn hình và buộc một chế độ xem cụ thể hướng.

Nếu đang phát triển cuộn dọc hoặc trò chơi như Flappy Birds, thì bạn rất có thể sẽ muốn trò chơi của mình luôn ở chế độ dọc.

    "display": "fullscreen",
    "orientation": "portrait"

Mặt khác, nếu bạn đang xây dựng một câu đố hoặc một trò chơi như X-Com, thì bạn có thể sẽ muốn trò chơi luôn sử dụng hướng ngang.

    "display": "fullscreen",
    "orientation": "landscape"

Trang web tin tức

Trong hầu hết các trường hợp, các trang web tin tức đều là trải nghiệm chỉ dựa trên nội dung. Hầu hết các nhà phát triển đương nhiên sẽ không nghĩ đến việc thêm tệp kê khai vào trang web tin tức. Tệp kê khai cho phép bạn xác định nội dung cần phát hành (trang chủ của trang web tin tức) và cách khởi chạy thẻ (chế độ toàn màn hình hoặc dưới dạng thẻ trình duyệt thông thường).

Bạn có toàn quyền quyết định và cho rằng người dùng sẽ muốn truy cập vào của bạn. Nếu bạn muốn trang web của mình có tất cả trình duyệt chrome như bạn mà trang web sẽ có, bạn có thể thiết lập màn hình thành browser.

    "display": "browser"

Nếu bạn muốn trang web tin tức của mình giống như phần lớn các ứng dụng tập trung vào tin tức trải nghiệm của họ dưới dạng ứng dụng và xóa tất cả Chrome giống như web khỏi giao diện người dùng, bạn có thể bạn có thể thực hiện việc này bằng cách đặt màn hình thành standalone.

    "display": "standalone"

Giả mạo: tự động ẩn thanh địa chỉ

Bạn có thể "chế độ toàn màn hình giả" bằng cách tự động ẩn thanh địa chỉ như sau:

window.scrollTo(0, 1);

Đây là một phương pháp khá đơn giản, trang tải và thanh trình duyệt được yêu cầu ra ngoài. Rất tiếc, mã này không được chuẩn hoá và không hiệu quả được hỗ trợ. Bạn còn phải làm nhiều thứ khác nữa.

Ví dụ: các trình duyệt thường khôi phục vị trí trên trang khi người dùng sẽ quay lại đó. Việc sử dụng window.scrollTo sẽ ghi đè thuộc tính này, điều này gây khó chịu người dùng. Để giải quyết vấn đề này, bạn phải lưu vị trí cuối cùng trong localStorage và giải quyết các trường hợp hiếm gặp (ví dụ: nếu người dùng có trang đang mở trong nhiều cửa sổ).

Nguyên tắc về trải nghiệm người dùng

Khi bạn tạo một trang web tận dụng chế độ toàn màn hình, có số lượng thay đổi tiềm ẩn đối với trải nghiệm người dùng mà bạn cần phải biết có thể xây dựng một dịch vụ mà người dùng yêu thích.

Không dựa vào các nút điều khiển thao tác

iOS không có nút quay lại phần cứng hay cử chỉ làm mới. Do đó, bạn phải đảm bảo rằng người dùng có thể di chuyển xuyên suốt ứng dụng mà không bị bó buộc.

Bạn có thể phát hiện xem mình đang chạy ở chế độ toàn màn hình hay chế độ đã cài đặt dễ dàng trên tất cả các nền tảng chính.

iOS

Trên iOS, bạn có thể sử dụng boolean navigator.standalone để xem người dùng đã khởi chạy từ màn hình chính hay không.

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

Tệp kê khai ứng dụng web (Chrome, Opera, Samsung)

Khi khởi chạy dưới dạng ứng dụng đã cài đặt, Chrome không chạy ở chế độ toàn màn hình thực sự nên document.fullscreenElement sẽ trả về giá trị rỗng và bộ chọn CSS không hoạt động.

Khi người dùng yêu cầu truy cập chế độ toàn màn hình thông qua một cử chỉ trên trang web của bạn, API toàn màn hình hiện có, bao gồm cả bộ chọn giả CSS cho phép bạn điều chỉnh giao diện người dùng để phản ứng với trạng thái toàn màn hình như sau

selector:-webkit-full-screen {
  display: block; // displays the element only when in fullscreen
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Nếu người dùng chạy trang web của bạn từ màn hình chính, thì phương tiện display-mode sẽ được đặt thành nội dung được xác định trong Tệp kê khai ứng dụng web. Trong trường hợp chế độ toàn màn hình thuần tuý sẽ:

@media (display-mode: fullscreen) {
}

Nếu người dùng chạy ứng dụng ở chế độ độc lập, display-mode truy vấn phương tiện sẽ là standalone:

@media (display-mode: standalone) {
}

Firefox

Khi người dùng yêu cầu chế độ toàn màn hình thông qua trang web của bạn hoặc mở ứng dụng trong chế độ toàn màn hình. Tất cả API toàn màn hình chuẩn đều sẵn có, bao gồm Bộ chọn giả CSS, cho phép bạn điều chỉnh giao diện người dùng để phản ứng với trạng thái toàn màn hình như sau:

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

Trong IE, lớp giả lập CSS thiếu dấu gạch nối, nhưng hoạt động tương tự như Chrome và Firefox.

selector:-ms-fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Thông số kỹ thuật

Chính tả trong thông số kỹ thuật khớp với cú pháp mà IE sử dụng.

selector:fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Giữ người dùng ở chế độ toàn màn hình

Đôi khi, API toàn màn hình có thể hơi khó khăn. Các nhà cung cấp trình duyệt không muốn khoá người dùng trong trang toàn màn hình để họ có cơ chế phá vỡ ra khỏi chế độ toàn màn hình sớm nhất có thể. Điều này có nghĩa là bạn không thể tạo trang web toàn màn hình trải dài nhiều trang vì:

Việc thay đổi URL theo phương thức lập trình bằng cách sử dụng window.location = "http://example.com" sẽ thoát khỏi chế độ toàn màn hình.
Khi người dùng nhấp vào đường liên kết ngoài bên trong trang của bạn, người dùng sẽ thoát khỏi chế độ toàn màn hình.
Việc thay đổi URL thông qua API navigator.pushState cũng sẽ tách toàn màn hình.

Bạn có hai tuỳ chọn nếu muốn người dùng ở chế độ toàn màn hình:

Sử dụng các cơ chế ứng dụng web có thể cài đặt để truy cập chế độ toàn màn hình.
Quản lý trạng thái ứng dụng và giao diện người dùng bằng mảnh #.

Bằng cách sử dụng #syntax để cập nhật url (window.location = "#somestate") và nghe sự kiện window.onhashchange, bạn có thể sử dụng ngăn xếp lịch sử để quản lý các thay đổi về trạng thái ứng dụng, cho phép người dùng sử dụng nút quay lại phần cứng hoặc cung cấp nút quay lại có lập trình đơn giản bằng cách sử dụng API lịch sử như sau:

window.history.go(-1);

Cho phép người dùng chọn thời điểm chuyển sang chế độ toàn màn hình

Không có gì khó chịu cho người dùng hơn việc trang web làm gì đó ngoài dự kiến. Khi người dùng truy cập vào trang web của bạn, đừng cố gắng lừa họ toàn màn hình.

Đừng chặn sự kiện chạm đầu tiên và gọi requestFullscreen().

Thật khó chịu.
Trình duyệt có thể quyết định nhắc người dùng vào một thời điểm nào đó trong tương lai về cho phép ứng dụng chiếm toàn màn hình.

Nếu bạn muốn chạy ứng dụng ở chế độ toàn màn hình, hãy nghĩ đến việc sử dụng nút cài đặt trải nghiệm cho từng nền tảng.

Không được gửi nội dung rác để khiến người dùng cài đặt ứng dụng của bạn vào màn hình chính

Nếu bạn định cung cấp trải nghiệm toàn màn hình thông qua cơ chế cài đặt ứng dụng ân cần với người dùng.

Hãy kín đáo. Sử dụng biểu ngữ hoặc chân trang để cho khách hàng biết rằng họ có thể cài đặt .
Nếu họ loại bỏ lời nhắc, đừng hiển thị lại lời nhắc đó.
Vào lần truy cập đầu tiên của người dùng, họ có khả năng sẽ không muốn cài đặt ứng dụng trừ khi họ hài lòng với dịch vụ bạn cung cấp. Hãy cân nhắc việc nhắc họ cài đặt sau một tương tác tích cực trên trang web của bạn.
Nếu người dùng thường xuyên truy cập vào trang web của bạn mà không cài đặt ứng dụng, họ không thể cài đặt ứng dụng của bạn trong tương lai. Đừng tiếp tục gửi spam cho họ.

Kết luận

Mặc dù chúng tôi không có API được chuẩn hoá và triển khai đầy đủ, nhưng việc sử dụng một số hướng dẫn được trình bày trong bài viết này, bạn có thể dễ dàng xây dựng những trải nghiệm tận dụng toàn bộ màn hình của người dùng, bất kể ứng dụng khách.