Tam Ekran Deneyimleri Sunma

Tam ekran, etkileyici web siteleri ve uygulamalar oluşturmak kolaydır ancak web'deki her şeyde olduğu gibi bunu yapmanın birkaç yolu vardır. Bu, özellikle daha fazla tarayıcı tam ekranda açılan "yüklü web uygulaması" deneyimini desteklediği için önemlidir.

Uygulamanızı veya sitenizi tam ekrana getirme

Kullanıcıların veya geliştiricilerin web uygulamalarını tam ekrana getirmenin birkaç yolu vardır.

  • Kullanıcı hareketine yanıt olarak tarayıcının tam ekrana geçmesini isteyin.
  • Uygulamayı ana ekrana yükleyin.
  • Adres çubuğunu otomatik olarak gizleyerek gizleyin.

Kullanıcı hareketine yanıt olarak tarayıcıdan tam ekrana geçmesini isteme

Tüm platformlar aynı değildir. iOS Safari'de tam ekran API'si yoktur ancak Android'deki Chrome, Firefox ve IE 11 ve sonraki sürümlerde vardır. Oluşturduğunuz çoğu uygulama, JS API'nin ve tam ekran spesifikasyonu tarafından sağlanan CSS seçicilerinin bir kombinasyonunu kullanır. Tam ekran deneyimi oluştururken dikkat etmeniz gereken başlıca JS API'leri şunlardır:

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

Uygulamanız tam ekran olduğunda artık tarayıcının kullanıcı arayüzü denetimlerini kullanamazsınız. Bu, kullanıcıların deneyiminizle etkileşim kurma şeklini değiştirir. İleri ve Geri gibi standart gezinme kontrolleri yoktur. Yenile düğmesi gibi bir çıkışları yoktur. Bu senaryoya uygunluk sağlamak önemlidir. Tarayıcı tam ekran moduna girdiğinde sitenizin stilini ve sunumunu değiştirmenize yardımcı olması için bazı CSS seçicileri kullanabilirsiniz.

<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 yapaydır; tedarikçi ön eklerinin kullanımıyla ilgili tüm karmaşıklığı gizledim.

Gerçek kod çok daha karmaşıktır. Mozilla, tam ekranı açmak ve kapatmak için kullanabileceğiniz çok faydalı bir komut dosyası oluşturmuştur. Gördüğünüz gibi, tedarikçi firma ön ek durumu, belirtilen API'ye kıyasla karmaşık ve hantaldır. Aşağıdaki kod biraz basitleştirilmiş olsa da 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);
  }
}

Web geliştiricileri olarak karmaşıklıktan nefret ederiz. Kullanabileceğiniz güzel bir üst düzey soyut API, Sindre Sorhus'un Screenfull.js modülüdür. Bu modül, iki farklı JS API'yi ve tedarikçi ön eklerini tek bir tutarlı API altında birleştirir.

Tam Ekran API'si İpuçları

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

body öğesini tam ekrana aldığınızı düşünmek doğaldır ancak WebKit veya Blink tabanlı bir oluşturma motoru kullanıyorsanız body genişliğinin tüm içeriği barındıracak şekilde mümkün olan en küçük boyuta küçültülmesi gibi garip bir etki göreceksiniz. (Mozilla Gecko kullanılabilir.)

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

Bu sorunu düzeltmek için body öğesi yerine document öğesini kullanın:

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

Video öğelerini tam ekran yapmak, diğer öğeleri tam ekran yapmakla aynıdır. Video öğesinde requestFullscreen yöntemini çağırırsınız.

<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> öğeniz kontrol özelliğini tanımlamıyorsa kullanıcı, tam ekran moduna geçtikten sonra videoyu kontrol edemez. Bunu yapmanın önerilen yolu, videoyu ve kullanıcının görmesini istediğiniz kontrolleri içeren temel bir kapsayıcı kullanmaktır.

<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ı nesnesini CSS sözde seçicisiyle birleştirebildiğiniz için (örneğin, "goFS" düğmesini gizlemek için) bu yöntem size çok daha fazla esneklik sağlar.

<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ünüzü uygun şekilde uyarlayabilirsiniz. Örneğin:

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

Ana ekrandan bir sayfayı tam ekranda açma

Kullanıcı ilgili sayfaya gittiğinde tam ekran web sayfası başlatmak mümkün değildir. Tarayıcı tedarikçileri, her sayfa yüklendiğinde tam ekran deneyiminin büyük bir rahatsızlık verdiğini bilir. Bu nedenle, tam ekrana girmek için kullanıcı hareketi gerekir. Tedarikçi firmalar, kullanıcıların uygulamaları "yüklemesine" izin verir. Yükleme işlemi, işletim sistemine kullanıcının platformda uygulama olarak başlatmak istediğinin bir sinyalidir.

Meta etiketleri veya manifest dosyalarını kullanarak aşağıdaki gibi büyük mobil platformlarda uygulamak oldukça kolaydır.

iOS

iPhone'un kullanıma sunulmasından bu yana kullanıcılar, web uygulamalarını ana ekrana yükleyip tam ekran web uygulamaları olarak başlatabiliyor.

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

İçerik "evet" olarak ayarlanırsa web uygulaması tam ekran modunda çalışır. Aksi takdirde çalışmaz. Varsayılan davranış, web içeriğini görüntülemek için Safari'yi kullanmaktır. window.navigator.standalone salt okunur Boole JavaScript mülkünü kullanarak bir web sayfasının tam ekran modunda görüntülenip görüntülenmediğini belirleyebilirsiniz.

Apple

Android için Chrome

Chrome ekibi kısa süre önce, kullanıcı sayfayı ana ekrana eklediğinde tarayıcıya sayfayı tam ekran başlatmasını söyleyen bir özellik uyguladı. iOS Safari modeline benzer.

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

Web uygulamanızı, cihazın ana ekranına bir uygulama kısayolu simgesi eklenecek ve Android için Chrome'un "Ana ekrana ekle" menü öğesi kullanılarak uygulama tam ekran "uygulama modunda" başlatılacak şekilde ayarlayabilirsiniz.

Google Chrome

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

Web Uygulama Manifesti (Chrome, Opera, Firefox, Samsung)

Web uygulamaları için manifest, geliştirici olarak uygulamanızın kullanıcının uygulama görmeyi bekleyeceği alanlarda (ör. mobil ana ekran) nasıl görüneceğini kontrol etmenize, kullanıcının neleri başlatabileceğini ve daha da önemlisi bunları nasıl başlatabileceğini yönetmenize olanak tanıyan basit bir JSON dosyasıdır. Gelecekte manifest, uygulamanız üzerinde daha da fazla kontrol sahibi olmanızı sağlayacak. Ancak şu anda uygulamanızın nasıl başlatılabileceğine odaklanıyoruz. Özellikle:

  1. Tarayıcıya manifest'iniz hakkında bilgi verme
  2. Lansman sürecini açıklama

Manifest'i oluşturduktan ve sitenizde barındırdıktan sonra, uygulamanızı kapsayan tüm sayfalarınıza aşağıdaki gibi bir bağlantı etiketi eklemeniz yeterlidir:

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

Chrome, Android için 38 sürümünden (Ekim 2014) beri manifest'leri desteklemektedir ve web uygulamanızın ana ekrana yüklendiğinde nasıl görüneceği (short_name, name ve icons mülkleri aracılığıyla) ve kullanıcı başlatıcı simgesini tıkladığında nasıl başlatılacağı (start_url, display ve orientation aracılığıyla) üzerinde kontrol sahibi olmanızı sağlar.

Aşağıda bir örnek manifest gösterilmektedir. Bir manifest'te bulunabilecek her şeyi göstermez.

{
  "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ı olup özelliği destekleyen bir tarayıcı kullanıcıları için daha iyi ve daha entegre deneyimler oluşturmanıza olanak tanır.

Kullanıcılar sitenizi veya uygulamanızı ana ekrana eklediğinde, bunu bir uygulama gibi ele almak isterler. Bu nedenle, kullanıcıları bir ürün açılış sayfasına değil, uygulamanızın işlevlerine yönlendirmeyi hedeflemeniz gerekir. Örneğin, kullanıcının uygulamanızda oturum açması gerekiyorsa bu sayfayı başlatmak iyi bir fikirdir.

Yardımcı program uygulamaları

Bu özellikten yardımcı program uygulamalarının çoğu hemen yararlanabilir. Bu uygulamaların, mobil platformdaki diğer tüm uygulamalar gibi bağımsız olarak başlatılmasını isteyeceğinizi tahmin ediyoruz. Bir uygulamanın bağımsız olarak başlatılmasını belirtmek için Web Uygulama Manifesti'ne şunu ekleyin:

    "display": "standalone"
Oyunlar

Oyunların çoğu, manifest'ten hemen yararlanabilir. Oyunların büyük çoğunluğu tam ekranda başlatılmak ve belirli bir yönde açılmak ister.

Dikey kaydırma veya Flappy Birds gibi bir oyun geliştiriyorsanız büyük olasılıkla oyununuzun her zaman dikey modda olmasını istersiniz.

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

Öte yandan, bir bulmaca oyunu veya X-Com gibi bir oyun geliştiriyorsanız oyunun her zaman yatay yönde kullanılmasını isteyebilirsiniz.

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

Haber siteleri çoğu durumda tamamen içerik odaklı deneyimlerdir. Çoğu geliştirici, bir haber sitesine manifest eklemeyi düşünmez. Manifest, neyin (haber sitenizin ana sayfası) ve nasıl (tam ekran veya normal tarayıcı sekmesi olarak) başlatılacağını tanımlamanıza olanak tanır.

Seçim size ve kullanıcılarınızın deneyiminize nasıl erişmek isteyeceğini düşündüğünüze bağlıdır. Sitenizde, bir sitede olmasını beklediğiniz tüm tarayıcı kromlarının bulunmasını istiyorsanız ekranı browser olarak ayarlayabilirsiniz.

    "display": "browser"

Haber sitenizin, haber odaklı uygulamaların çoğunun deneyimlerini uygulama olarak ele aldığı gibi görünmesini ve kullanıcı arayüzünden tüm web benzeri Chrome öğelerini kaldırmasını istiyorsanız görüntüleme ayarını standalone olarak belirleyebilirsiniz.

    "display": "standalone"

Adres çubuğunu otomatik olarak gizleme

Adres çubuğunu otomatik olarak gizleyerek "sahte tam ekran" kullanabilirsiniz. Bunun için:

window.scrollTo(0, 1);

Bu oldukça basit bir yöntemdir. Sayfa yüklenir ve tarayıcı çubuğuna yoldan çekilmesi söylenir. Maalesef standartlaştırılmış ve iyi desteklenmiyor. Ayrıca bir dizi tuhaflığı da gidermeniz gerekir.

Örneğin, tarayıcılar genellikle kullanıcı sayfaya geri döndüğünde sayfadaki konumu geri yükler. window.scrollTo kullanılması bu ayarı geçersiz kılar ve kullanıcıyı rahatsız eder. Bu sorunun üstesinden gelmek için son konumu localStorage'ta saklamanız ve uç durumlarla (ör. kullanıcının sayfayı birden fazla pencerede açması) ilgilenmeniz gerekir.

Kullanıcı deneyimi yönergeleri

Tam ekrandan yararlanan bir site oluştururken kullanıcılarınızın seveceği bir hizmet sunabilmek için dikkat etmeniz gereken bazı potansiyel kullanıcı deneyimi değişiklikleri vardır.

Gezinme denetimlerine güvenmeyin

iOS'te donanım geri düğmesi veya yenileme hareketi yoktur. Bu nedenle, kullanıcıların uygulamada kilitlenmeden gezinebildiğinden emin olmanız gerekir.

Tüm büyük platformlarda tam ekran modunda mı yoksa yüklü modda mı çalıştığınızı kolayca algılayabilirsiniz.

iOS

iOS'te kullanıcının ana ekrandan açılıp açılmadığını görmek için navigator.standalone doğru/yanlış değerini kullanabilirsiniz.

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

Web Uygulama Manifesti (Chrome, Opera, Samsung)

Yüklü bir uygulama olarak başlatıldığında Chrome gerçek tam ekran deneyiminde çalışmaz. Bu nedenle document.fullscreenElement null döndürür ve CSS seçicileri çalışmaz.

Kullanıcı sitenizde bir hareketle tam ekran isteğinde bulunduğunda, kullanıcı arayüzünüzü tam ekran durumuna tepki verecek şekilde uyarlamanıza olanak tanıyan CSS sözde seçici de dahil olmak üzere standart tam ekran API'leri kullanılabilir.

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 başlatırsa display-mode medya sorgusu, web uygulaması manifestinde tanımlandığı şekilde ayarlanır. Tam ekranda ise:

@media (display-mode: fullscreen) {
}

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

@media (display-mode: standalone) {
}

Firefox

Kullanıcı siteniz üzerinden tam ekran isteğinde bulunduğunda veya uygulamayı tam ekran modunda başlattığında, kullanıcı arayüzünüzü tam ekran durumuna tepki verecek şekilde uyarlamanıza olanak tanıyan CSS sözde seçici de dahil olmak üzere tüm standart tam ekran API'leri kullanılabilir. Ö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 diğer açılardan Chrome ve Firefox'a benzer şekilde çalışır.

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 dizimine uygundur.

selector:fullscreen {
  display: block;
}

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

Kullanıcıyı tam ekran deneyiminde tutma

Tam ekran API'si bazen biraz titiz olabilir. Tarayıcı tedarikçileri, kullanıcıları tam ekran bir sayfaya kilitlemek istemez. Bu nedenle, mümkün olan en kısa sürede tam ekrandan çıkma mekanizmaları geliştirmişlerdir. Bu nedenle, aşağıdakiler nedeniyle birden fazla sayfaya yayılan tam sayfa bir web sitesi oluşturamazsınız:

  • window.location = "http://example.com" kullanarak URL'yi programatik olarak değiştirmek tam ekrandan çıkmanıza neden olur.
  • Sayfanızdaki harici bir bağlantıyı tıklayan kullanıcı, tam ekrandan çıkar.
  • URL'nin navigator.pushState API aracılığıyla değiştirilmesi de tam ekran deneyimini sonlandırır.

Kullanıcıyı tam ekran deneyiminde tutmak için iki seçeneğiniz vardır:

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

URL'yi güncellemek için # söz dizimini (window.location = "#somestate") kullanarak ve window.onhashchange etkinliğini dinleyerek, uygulama durumundaki değişiklikleri yönetmek, kullanıcının donanım geri düğmelerini kullanmasına izin vermek veya History API'yi aşağıdaki gibi kullanarak basit bir programatik geri düğmesi deneyimi sunmak için tarayıcının kendi geçmiş yığınını kullanabilirsiniz:

window.history.go(-1);

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

Kullanıcılar için web sitesinin beklenmedik bir şey yapmasından daha can sıkıcı bir durum yoktur. Kullanıcı sitenize gittiğinde onu tam ekrana geçmeye zorlamayın.

İlk dokunma etkinliğini durdurup requestFullscreen() işlevini çağırmayın.

  1. Bu can sıkıcı bir durum.
  2. Tarayıcılar, gelecekte bir noktada kullanıcıdan uygulamanın tam ekran kullanmasına izin vermesini isteyebilir.

Uygulamaları tam ekranda başlatmak istiyorsanız her platform için yükleme deneyimlerini kullanmayı düşünün.

Kullanıcıyı uygulamanızı ana ekrana yüklemesi için spam'e maruz bırakmayın

Yüklü uygulama mekanizmaları aracılığıyla tam ekran deneyimi sunmayı planlıyorsanız kullanıcıyı göz önünde bulundurun.

  • Gizliliğe önem verin. Uygulamayı yükleyebileceklerini bildirmek için banner veya altbilgi kullanın.
  • Kullanıcı istemi kapatırsa tekrar göstermeyin.
  • Kullanıcılar, hizmetinizden memnun kalmadıkları sürece ilk ziyaretlerinde uygulamayı yüklemek istemeyebilir. Sitenizde olumlu bir etkileşimden sonra kullanıcılardan uygulamayı yüklemelerini isteyebilirsiniz.
  • Sitenizi düzenli olarak ziyaret eden ancak uygulamanızı yüklemeyen kullanıcıların gelecekte uygulamanızı yükleme olasılığı düşüktür. Spam göndermeye devam etmeyin.

Sonuç

Tamamen standartlaştırılmış ve uygulanmış bir API'miz olmasa da bu makalede sunulan bazı yönergeleri kullanarak istemciden bağımsız olarak kullanıcının ekranının tamamından yararlanan deneyimler kolayca oluşturabilirsiniz.

Geri bildirim