This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Özet

Ekran oryantasyonu cihaz oryantasyonundan bir miktar farklı bir terim. Cihazın kendi oryantasyonunu tespit etme yeteneği olmasa bile ekranının her zaman bir oryantasyonu vardır. Eğer cihaz bu yeteneğe sahip ise web uygulamasının arayüzünü korumak veya uyarlamak için ekranı yönetme yeteneğine sahip olması faydalı bir özellik.

Ekran oryantasyonunu yönetebilek için hem CSS'e hem Javascript'e dayanan çeşitli yöntemler mevcut. Bu yöntemlerden ilki orientation media query CSS kullanarak tarayıcının yatay modda (genişliğin yükseklikten uzun olduğu mod) veya dikey modda (yüksekliğin genişlikten uzun olduğu mod) içeriğin ekrandaki yerleşimini ayarlamasını sağlamak.

İkinci yöntem ise Javascript Screen orientation API kullanılarak ekranın mevcut oryantasyonun alınması ve sabitlenmesi.

Oryantasyona göre yerleşim planını ayarlamak

Cihazın oryantasyonu değiştiğinde içeriğin ekrandaki yerleşiminin de değişmesi en çok istenilen durumlardan biri. Örneğin buton çubuğunun cihazın oryantasyonu bounca uzamasını istiyoruz. Media query kullanarak kolay ve otomatik bir şekilde yapabiliriz.

Aşağıdaki HTML kodu üzerinden bir örnek yapalım.

<ul id="toolbar">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis lacinia nisi nec sem viverra vitae fringilla nulla ultricies. In ac est dolor, quis tincidunt leo. Cras commodo quam non tortor consectetur eget rutrum dolor ultricies. Ut interdum tristique dapibus. Nullam quis malesuada est.</p>

CSS ekranın oryatasyonuna göre çalışacak özel stiller için media query'lere güveniyor.

/* Önce ortak stiller tanımlayalım */

html, body {
  width : 100%;
  height: 100%;
}

body {
  border: 1px solid black;

  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

p {
  font   : 1em sans-serif;
  margin : 0;
  padding: .5em;
}

ul {
  list-style: none;

  font   : 1em monospace;
  margin : 0;
  padding: .5em;

  -moz-box-sizing: border-box;
  box-sizing: border-box;

  background: black;
}

li {
  display: inline-block;
  margin : 0;
  padding: 0.5em;
  background: white;
}

Ortak stillerimiz hazır olduğuna göre oryantasyona göre çalışacak özel durumları tanımlamaya başlayabiliriz.

/* Dikey modda buton çubuğunun üstte olmasını istiyoruz */

@media screen and (orientation: portrait) {
  #toolbar {
    width: 100%;
  }
}

/* Yatay modda buton çubuğunun solda durmasını istiyoruz */

@media screen and (orientation: landscape) {
  #toolbar {
    position: fixed;
    width: 2.65em;
    height: 100%;
  }

  p {
    margin-left: 2em;
  }

  li + li {
    margin-top: .5em;
  }
}

Ve sonuç:

Portrait Landscape

Not: Oryantasyon media query'si  tarayıcı penceresinin(veya iframe'in) oryantasyonuna göre bu stilleri çalıştırıyor cihazın oryantasyonuna göre değil.

Ekran oryantasyonunu sabitlemek

Warning: Bu API şu anda deneysel bir çalışma ve Firefox OS ile Firefox for Android 'de  moz önekiyle, Windows 8.1 ve üstünde Internet Explorer'larda ise ms önekiyle kullanılabilir durumda.

Bazı cihazlar (genellikle mobil cihazlar) kullanıcının kendi ekranındakileri her zaman okuyabileceğine garanti vererek ekran oryantasyonunu kendi oryantasyonuna göre dinamik olarak değiştirebiliyor. Bu davranış içerik metinlerden oluşuyorken çok iyi çalışmasına rağmen oryantasyona bağlı oyun gibi içeriklerde uygulamayı tamamen kullanılmaz hale getirebiliyor.

Screen Orientation API bu şekilde negatif etkisi olan değişimlerin engellenmesi için geliştirildi.

Oryantasyon değişikliğini dinleme

Cihaz oryantasyonunu her değiştirdiğinde orientationchange event'i tetiklenir ve  o anki oryantasyonu Screen.orientation özelliğiyle okunabilir.

screen.addEventListener("orientationchange", function () {
  console.log("Ekranın oryantasyonu: " + screen.orientation);
});

Oryantasyon değişikliğini engelleme

Bir web uygulaması ekranın oryantasyonunu kendi ihityaçlarına uyacak şekilde sabitleyebilir. Ekranın oryantasyonunu sabitlemek için Screen.lockOrientation()  metodu kullanılırken sabitlemeyi kaldırmak için ise Screen.unlockOrientation() metodu kullanılabilir.

Screen.lockOrientation() parametre olarak ekranın nasıl sabitlenmesi gerektiğine göre String (veya birden çok string) parametre alır. Geçerli parametre değerleri: portrait-primary, portrait-secondary, landscape-primary, landscape-secondary, portrait, landscape . (Bu değerler hakkında detaylı bilgi için Bkz: Screen.lockOrientation).

screen.lockOrientation('landscape');

Not:Ekranı sabitlemek web uygulaması bağımlıdır. Eğer uygulama A yatay moda sabitlenmiş ve uygulama B dkey moda sabitlenmiş ise A'dan B'ye ya da B'den A'ya geçildiğinde orientationchange event'i tetiklenmez. Çünkü ikisi de kendi oryantasyonlarını korumaktadır.

Ancak oryantasyonu sabitlerken istenen mevcut oryantasyon değişerek sabitlenen oryantasyona geçildiyse orientationchange event'i tetiklenir.

Firefox OS ve Android: Manifest ile oryantasyonu sabitleme

Firefox OS ve Firefox Android (yakında Firefox masaüstü de) için oryantasyonu sabitlemenin özel bir yolu uygulamanın manifest dosyasının orientation alanına istenen oryantasyon modunu yazmak. Örneğin dikey mod için:

"orientation": "portrait"

Ayrıca bakınız

Document Tags and Contributors

Contributors to this page: mdnwebdocs-bot, mesutgolcuk
Last updated by: mdnwebdocs-bot,