Tam Ekran Deneyimleri Sunma

Kolayca etkileyici tam ekran web siteleri oluşturabiliyoruz. ancak web'deki her şeyde olduğu gibi bunu yapmanın birkaç yolu vardır. Bu, özellikle de "yüklü bir web uygulaması" deneyimini yaşayabilirsiniz.

Uygulamanızı veya sitenizi tam ekran yapma

Bir kullanıcı veya geliştirici, bir web uygulamasını tam ekran olarak görüntülemenin birkaç yolu vardır.

  • Kullanıcı hareketine yanıt olarak tarayıcının tam ekrana geçmesini iste.
  • Uygulamayı ana ekrana yükleyin.
  • Sahte: Adres çubuğunu otomatik olarak gizle.

Kullanıcı hareketine yanıt olarak tarayıcının tam ekrana geçmesini iste

Tüm platformlar eşit değildir. iOS Safari'de tam ekran API'si yok, ama Android'deki Chrome'da var. Firefox ve IE 11+. Oluşturduğunuz çoğu uygulama Tam ekran spesifikasyonu tarafından sağlanan JS API ve CSS seçiciler. Ana Tam ekran deneyimi oluştururken dikkat etmeniz gereken JS API'leri şunlardır:

  • element.requestFullscreen() (şu anda Chrome, Firefox ve IE'de ön ek olarak belirlenmiştir) öğeyi tam ekran modunda gösterir.
  • document.exitFullscreen() (şu anda Chrome, Firefox ve IE'de ön ek olarak sunulmaktadır. Firefox bunun yerine cancelFullScreen() kullanır) tam ekran modunu iptal eder.
  • document.fullscreenElement (şu anda Chrome, Firefox ve IE'de ön ek olarak belirlenmiştir) öğelerden herhangi biri tam ekran modundaysa true değerini döndürür.
ziyaret edin.

Uygulamanız tam ekran olduğunda tarayıcının kullanıcı arayüzü kontrollerine artık sahip olmazsınız kullanabilirsiniz. Bu, kullanıcıların ürün veya hizmetlerinizle sahip olacaksınız. Yönlendirler gibi standart gezinme denetimlerine sahip değiller ve Geriye doğru; Yenile düğmesi olan kaçış noktaları yoktur. İnsanların çok önemlidir. Cevaplarınıza yardımcı olması için bazı CSS seçicileri tarayıcı başladığında sitenizin stilini ve sunumunu da tam ekran moduna geçer.

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

Yukarıdaki örnek biraz tartışmalı; etrafımdaki tüm karmaşıklığı gizledim tedarikçi firma öneklerinin kullanılmasından kaynaklanır.

Gerçek kod çok daha karmaşıktır. Mozilla , tam ekrana geçmek için kullanabileceğiniz çok yararlı bir komut dosyası oluşturdu. Farklı Gördüğünüz gibi tedarikçi öneki durumu karmaşıktır ve daha kullanışsızdır. Biraz basitleştirilmiş kodla bile ama yine de karmaşıktır.

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

Biz web geliştiricileri karmaşıklıktan nefret ederiz. Kullanabileceğiniz güzel bir üst düzey soyut API Sindre Sorhus'un Screenfull.js modülüdür Birbirinden biraz farklı olan iki JS API'sini ve tedarikçi ön ekini tek bir yerde birleştirir. tutarlı API.

Tam Ekran API'leriyle İlgili İpuçları

Dokümanı tam ekran yapma
Gövde öğesinde tam ekran
Şekil 1: Gövde öğesinde tam ekran.

Gövde öğesini tam ekran aldığınızı düşünmek doğaldır ancak webKit veya Blink tabanlı bir oluşturma motoru üzerinde garip bir etkisi olduğunu mümkün olan en küçük boyuta küçülterek içerik. (Mozilla Gecko kullanılabilir.)

Doküman öğesinde tam ekran
Şekil 2: Belge öğesinde tam ekran.

Bunu düzeltmek için body öğesi yerine doküman öğesini kullanın:

document.documentElement.requestFullscreen();
Video öğesini tam ekran yapma

Bir video öğesini tam ekran yapmak, diğer herhangi bir öğeyi tam ekran yapmakla öğesini tam ekran olarak ayarlayın. Videoda requestFullscreen yöntemini çağırıyorsunuz öğesine dokunun.

<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> öğenizde denetimler özelliği tanımlanmamışsa Kullanıcının tam ekran olduktan sonra videoyu kontrol etmesi mümkün değildir. İlgili içeriği oluşturmak için kullanılan Bunun için önerilen yol, videoyu sarmalayan ve onu sarmalayan temel bir container'ın görmelerini istediğiniz kontroller içerir.

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

Kapsayıcıyı başka boyutlara, resimlere ve resimlere kadar nesne (örneğin, "goFS" düğmesini gizlemek için).

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

Bu kalıpları kullanarak tam ekranın ne zaman çalıştığını algılayabilir ve kullanıcı arayüzüne uygun şekilde çalışın. Örneğin:

  • Başlangıç sayfasına giden bir bağlantı sağlayarak
  • İletişim kutularını kapatmak veya geri gitmek için bir mekanizma sağlayarak

Bir sayfayı ana ekrandan tam ekran olarak başlatma

Kullanıcı gezindiğinde tam ekran web sayfası açmak mümkün değildir. Tarayıcı tedarikçi firmaları, her sayfa yüklemesinde tam ekran deneyiminin bilincindedir. büyük bir rahatsızlığa yol açtığından, tam ekrana geçmek için kullanıcı hareketinin olması gerekir. Tedarikçiler kullanıcıların "yükleme" yapmasına izin verir yükleme işlemidir ve yükleme işlemi, bir uygulama olarak başlatmak istediğini belirten bir uyarı gönderir. platformu.

Başlıca mobil platformlarda, aşağıdakilerden birini kullanarak uygulamak oldukça kolaydır: meta etiketlerini veya manifest dosyalarını aşağıdaki şekilde kullanabilirsiniz.

iOS

iPhone'un piyasaya sürülmesinden bu yana kullanıcılar, web uygulamalarını yükleyerek ve tam ekran web uygulamaları olarak başlatmalarını sağlayın.

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

İçerik evet değerine ayarlanırsa web uygulaması tam ekran modunda çalışır; Aksi takdirde çalışmaz. Varsayılan davranış, web'i görüntülemek için Safari kullanmaktır içerik. Bir web sayfasının tam ekran modunda görüntülenip görüntülenmediğini belirleyebilirsiniz Bunun için window.navigator.dependentone salt okunur Boole JavaScript özelliğini kullanın.

Apple

Android için Chrome

Chrome ekibi kısa bir süre önce, tarayıcıya Kullanıcı ana ekrana eklediğinde sayfayı tam ekran olarak başlat. Evet iOS Safari modeline benzer.

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

Web uygulamanızı, bir dosyaya uygulama kısayol simgesi ekleyecek şekilde ayarlayabilirsiniz. uygulamanın tam ekran "uygulama modunda" başlatılmasını kullanarak Android için Chrome'un "Ana ekrana ekle" özelliği menü seçeneği.

Google Chrome

Web uygulaması manifestini kullanmak daha iyi bir seçenektir.

Web Uygulaması Manifest dosyası (Chrome, Opera, Firefox, Samsung)

Web uygulamaları için manifest size bir geliştirici olarak, uygulamanızın o bölgede kullanıcıya nasıl görüneceğini kontrol etme olanağı görmelerini bekler. (örneğin, mobil ana ekran), doğrudan kullanıcının neleri başlatabileceği ve daha da önemlisi bunu nasıl başlatabileceği. gelecekte manifest dosyası, uygulamanız üzerinde daha da fazla kontrole sahip olmanızı sağlayacak. sadece uygulamanızın nasıl kullanıma sunulabileceğine odaklanıyoruz. Özellikle:

  1. Tarayıcıya manifest dosyanızı bildirme
  2. Lansmanın nasıl yapılacağını açıklamak

Manifest dosyası oluşturulduktan ve sitenizde barındırıldıktan sonra, ihtiyacınız olan tek şey yapmanız gereken, uygulamanızı kapsayan tüm sayfalarınızdan aşağıdaki gibi bir bağlantı etiketi eklemektir:

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

Chrome, Android için sürüm 38'den beri manifestleri destekliyor (Ekim 2014) ve web uygulamanızın yüklendiğinde nasıl görüneceği üzerinde kontrol sahibi olmanızı sağlar (short_name, name ve icons özellikleri aracılığıyla) ve ana ekranda Kullanıcı başlat simgesini tıkladığında (start_url üzerinden) display ve orientation).

Aşağıda örnek bir manifest gösterilmiştir. Bir projede yer alabilecek her şeyi manifest'ini kullanabilirsiniz.

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

Bu özellik tamamen aşamalıdır ve daha iyi, daha fazla türde Özelliği destekleyen tarayıcının kullanıcılarına sunmak için entegre deneyimler sunar.

Bir kullanıcı, sitenizi veya uygulamanızı ana ekrana eklediğinde, uygulamaya benzetebiliriz. Bu, kullanıcıyı sunuma bir ürün açılış sayfası değil, uygulamanızın işlevidir. Örneğin, Kullanıcının uygulamanızda oturum açması gerekiyorsa bu, lansman sonrasında gerçekleşebilir.

Yardımcı uygulamalar

Yardımcı program uygulamalarının çoğu bu durumdan hemen yararlanır. Bunlar için diğer tüm uygulamalarda olduğu gibi bu uygulamaların bağımsız olarak başlatılmalarını isteyeceksiniz. en iyi uygulamaları paylaşacağız. Bir uygulamanın bağımsız olarak başlatılmasını sağlamak için bunu Web Uygulama manifesti:

    "display": "standalone"
Oyunlar

Oyunların çoğunda manifest dosyaları hemen etkinleştirilir. En büyük çoğu oyun tam ekran modunda başlatmak isteyerek Yönü.

Dikey kaydırma çubuğu veya Flappy Birds gibi bir oyun geliştiriyorsanız büyük olasılıkla oyununuzun her zaman dikey modda kalmasını isteyecektir.

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

Öte yandan, bulmaca veya X-Com gibi bir oyun geliştiriyorsanız Muhtemelen oyunun her zaman yatay yönü kullanmasını isteyecektir.

    "display": "fullscreen",
    "orientation": "landscape"
Haber siteleri

Haber siteleri, çoğu durumda tamamen içeriğe dayalı deneyimlerdir. Çoğu geliştirici doğal olarak bir haber sitesine manifest eklemeyi düşünmez. Manifest neyi başlatacağınızı (haber sitenizin ön sayfası) tanımlamanıza ve nasıl başlatacağınızı (tam ekran veya normal bir tarayıcı sekmesi olarak) seçebilirsiniz.

Seçim size ve kullanıcılarınızın Google Hesabınıza nasıl erişmek isteyeceğini sahip olacaksınız. Sitenizde istediğiniz tüm Chrome tarayıcılarının olmasını istiyorsanız, olması durumunda, görüntüyü browser olarak ayarlayabilirsiniz.

    "display": "browser"

Haber sitenizin çoğu haber odaklı uygulamanın, kullanıcılar tarafından daha fazla uygulama olarak kullanıyor ve kullanıcı arayüzünden tüm web benzeri Chrome'ları bunu, ekranı standalone olarak ayarlayarak yapabilirsiniz.

    "display": "standalone"

Sahte: Adres çubuğunu otomatik gizle

"Sahte tam ekran" yapabilirsiniz. aşağıdaki gibi otomatik gizleyerek ayarlayabilirsiniz:

window.scrollTo(0, 1);

Bu oldukça basit bir yöntemdir; sayfa yüklenir ve tarayıcı çubuğuna bunun için yoldan çekilin. Ne yazık ki standart bir yapıda değil ve iyi değil. desteklenir. Ayrıca bazı tuhaf işleri de çözmek zorundasınız.

Örneğin, kullanıcı bir web sitesini ziyaret ettiğinde geri döner. window.scrollTo kullanıldığında geçersiz kılındı ve bu durum rahatsız edici gösterir. Bu sorunu çözmek için son konumu ve uç senaryolarla ilgilenmeye çalışın (örneğin, kullanıcı çok kısıtlı bir depolama alanına sahipse sayfa birden çok pencerede açılır).

Kullanıcı deneyimi kuralları

Tam ekrandan yararlanan bir site oluştururken için bilmeniz gereken potansiyel kullanıcı deneyimi değişikliklerinin sayısı kullanıcılarınızın seveceği bir hizmet oluşturabilirsiniz.

Gezinme denetimlerine güvenmeyin

iOS'te donanım geri düğmesi veya yenileme hareketi yoktur. Bu nedenle, Kullanıcıların uygulamaya kilitlenmeden uygulama içinde gezinebilmelerini sağlamak.

Tam ekran modunda mı yoksa yüklü modda mı çalıştığınızı tespit edebilirsiniz rahatça erişim olanağı sunar.

iOS

iOS'te, navigator.standalone boole değerini kullanarak kullanıcının ana ekrandan başlatılıp başlatılmadığı.

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

Web Uygulaması Manifest (Chrome, Opera, Samsung)

Chrome, yüklü bir uygulama olarak başlatılırken gerçek tam ekranda çalışmıyor deneyim, böylece document.fullscreenElement, null değeri ve CSS seçicileri döndürür. çalışmaz.

Kullanıcı sitenizde bir hareketle tam ekran istediğinde, standart tam ekran API'leri de dahil olmak üzere CSS sanal seçicisi de kullanıcı arayüzünüzü aşağıdaki gibi tam ekran durumuna tepki verecek şekilde uyarlayın

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

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

Kullanıcılar sitenizi ana ekrandan açarsa display-mode medyası sorgusu, Web Uygulaması Manifest'inde tanımlanan değere ayarlanır. Projede tam ekran modundaysa şöyle olur:

@media (display-mode: fullscreen) {
}

Kullanıcı uygulamayı bağımsız modda başlatırsa display-mode ortam sorgusu standalone olur:

@media (display-mode: standalone) {
}

Firefox

Kullanıcı, siteniz üzerinden tam ekran istediğinde veya uygulamayı şurada başlattığında: tam ekran modu dahil tüm standart tam ekran API'leri kullanılabilir. Kullanıcı arayüzünüzü tam ekran durumuna tepki verecek şekilde uyarlamanıza olanak tanıyan sahte CSS seçici örneğin:

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'de CSS sözde sınıfında kısa çizgi yoktur, ancak aksi takdirde şuna benzer şekilde çalışır: Chrome ve Firefox.

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

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

Spesifikasyon

Spesifikasyondaki yazım, IE tarafından kullanılan söz dizimiyle eşleşmelidir.

selector:fullscreen {
  display: block;
}

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

Kullanıcıyı tam ekran deneyiminde tutun

Tam ekran API'si bazen biraz titiz olabilir. Tarayıcı satıcıları istemiyor kullanıcıları tam ekran bir sayfada kilitlemelerini ve böylece, tam ekrandan çıkarmaya çalışın. Bu demek oluyor ki birden fazla sayfaya yayılan tam ekran web sitesidir çünkü:

  • Tam ekran dışına window.location = "http://example.com" araları kullanılarak URL, programlı bir şekilde değiştiriliyor.
  • Sayfanızdaki harici bir bağlantıyı tıklayan kullanıcı tam ekrandan çıkacaktır.
  • URL'nin navigator.pushState API aracılığıyla değiştirilmesi de tam ekran deneyimi.

Kullanıcının tam ekran deneyimi yaşamasını istiyorsanız iki seçeneğiniz vardır:

  1. Tam ekrana geçmek için yüklenebilir web uygulaması mekanizmalarını kullanın.
  2. # parçasını kullanarak kullanıcı arayüzünüzü ve uygulama durumunuzu yönetin.

URL'yi güncellemek için #syntax değerini kullanarak (window.location = "#somestate") ve window.onhashchange etkinliğini dinlerken tarayıcının kendi etkinliğini kullanabilirsiniz uygulama durumundaki değişiklikleri yönetmek için geçmiş yığını, kullanıcının donanım geri düğmelerini veya basit bir programatik geri düğmesi aşağıdaki gibi geçmiş API'sini kullanarak deneyimi elde edebilirsiniz:

window.history.go(-1);

Kullanıcının ne zaman tam ekrana geçeceğini seçmesine izin ver

Kullanıcı için, bir şey yapan web sitesinden daha fazla rahatsız edici bir şey yok beklemezsiniz. Bir kullanıcı, sitenize geldiğinde onu aldatmaya çalışmayın ve tam ekran.

İlk temas etkinliğine müdahale edip requestFullscreen() numarasını aramayın.

  1. Rahatsız edici.
  2. Tarayıcılar, ileride kullanıcıya e-posta adresi ile ilgili izin vererek uygulamanın tam ekranı kaplamasını sağlayabilirsiniz.

Uygulamaları tam ekran modunda başlatmak istiyorsanız yükleme her platform için geçerli olacak.

Uygulamanızı ana ekrana yüklemesi için kullanıcıya spam göndermeyin

Yüklü uygulama mekanizmaları üzerinden tam ekran deneyimi sunmayı planlıyorsanız kullanıcıya saygılı olun.

  • Dikkatli olun. Uygulamayı yükleyebileceklerini bildirmek için bir banner veya altbilgi kullanın. uygulamasını indirin.
  • Kullanıcı istemi kapatırsa bir daha gösterme.
  • İlk ziyaretlerinde, belirli bir süre boyunca onlar da hizmetinizden memnun kaldı. Yükledikten sonra uygulamayı yükleme sitenizde olumlu bir etkileşim sağlar.
  • Sitenizi düzenli olarak ziyaret eden bir kullanıcı uygulamayı yüklemezse yükleme ihtimalinizin düşük olduğu düşünülebilir. Onlarla spam göndermeye devam etmeyin.

Sonuç

Tamamen standartlaştırılmış ve uygulanmış bir API'ye sahip olmasak da önemli bilgilerin yer aldığı bir rehbere ihtiyacınız vardır. kullanıcının tüm ekranının tamamında kullanılabilir.

Geri bildirim