İPhone Web Uygulamasında yönlendirmeyi portre moduna nasıl kilitlerim?

Bir iPhone Web Uygulaması oluşturuyorum ve yönlendirmeyi dikey moda kilitlemek istiyorum. Mümkün mü? Bunu yapmak için herhangi bir web kiti uzantısı var mı?

Lütfen bunun Mobil Safari için HTML ve JavaScript ile yazılmış bir uygulama olduğunu, Objective-C ile yazılmış yerel bir uygulama DEĞİLDİR.

Görünüm noktası yönüne göre CSS stilleri belirtebilirsiniz: Tarayıcıyı gövde [orient = "manzara"] veya gövde [orient = "portre"] ile hedefleyin

http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

Ancak...

Apple'ın bu konudaki yaklaşımı, geliştiricinin CSS'yi yönlendirme değişikliğine göre değiştirmesine izin vermek, ancak yeniden yönlendirmeyi tamamen önlemek için değil. Başka bir yerde benzer bir soru buldum:

http://ask.metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari

Bu oldukça acayip bir çözüm, ama en azından bir şey (?). Buradaki fikir, sayfanızın içeriğini yarı portre moduna döndürmek için bir CSS dönüşümü kullanmaktır. Başlamak için JavaScript (jQuery ile ifade edilmiştir) kodu:

$(document).ready(function () {
  function reorient(e) {
    var portrait = (window.orientation % 180 == 0);
    $("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
  }
  window.onorientationchange = reorient;
  window.setTimeout(reorient, 0);
});

Kod, sayfanızın tüm içeriğinin gövde öğesinin hemen içindeki bir div içinde yaşamasını bekler. Yatay modda bu div'i 90 derece döndürür - resme geri döner.

Okuyucuya bir egzersiz olarak bırakılır: div, merkez noktasının etrafında döner, bu nedenle mükemmel bir şekilde kare olmadığı sürece konumunun ayarlanması gerekecektir.

Ayrıca, hoş olmayan bir görsel sorun var. Yönü değiştirdiğinizde, Safari yavaşça döner, daha sonra üst düzey div 90 dereceye farklı yapışır. Daha da fazla eğlence için

body > div { -webkit-transition: all 1s ease-in-out; }

CSS'nize. Cihaz döndüğünde Safari bunu yapar, ardından sayfanızın içeriği de döner. Çeldirici!

Bu cevap henüz mümkün değil, ancak "gelecek nesiller" için gönderiyorum. Umarım, bir gün bunu CSS @viewport kuralı ile yapabiliriz:

@viewport {
    orientation: portrait;
}

İşte "Kullanabilir miyim" sayfası (2019'dan itibaren sadece IE ve Edge):
https://caniuse.com/#feat=mdn-css_at-rules_viewport_orientation

Spec (işlemde):
https://drafts.csswg.org/css-device-adapt/#orientation-desc

MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/orientation

MDN tarayıcı uyumluluk tablosuna ve aşağıdaki makaleye dayanarak, IE ve Opera'nın belirli sürümlerinde bazı destek var gibi görünüyor:
http://menacingcloud.com/?c=cssViewportOrMetaTag

Bu JS API Spesifikasyonu ayrıca alakalı görünüyor:
https://w3c.github.io/screen-orientation/

Önerilen @viewportkuralla mümkün olduğu için orientation, bir metaetikette görünüm alanı ayarlarında bulunmanın mümkün olacağını varsaymıştım , ancak şu ana kadar bu konuda hiçbir başarı elde etmedim.

İşler geliştikçe bu yanıtı güncellemekten çekinmeyin.

Html5 oyunumuzda aşağıdaki kod kullanılmıştır.

$(document).ready(function () {
     $(window)    
          .bind('orientationchange', function(){
               if (window.orientation % 180 == 0){
                   $(document.body).css("-webkit-transform-origin", "")
                       .css("-webkit-transform", "");               
               } 
               else {                   
                   if ( window.orientation > 0) { //clockwise
                     $(document.body).css("-webkit-transform-origin", "200px 190px")
                       .css("-webkit-transform",  "rotate(-90deg)");  
                   }
                   else {
                     $(document.body).css("-webkit-transform-origin", "280px 190px")
                       .css("-webkit-transform",  "rotate(90deg)"); 
                   }
               }
           })
          .trigger('orientationchange'); 
});

Sadece medya sorguları kullanarak ekranı döndürmek için bu CSS yöntemi ile geldi. Sorgular burada bulduğum ekran boyutlarını temel alıyor . 480 pikselden fazla veya 480 pikselden daha yüksek veya 480 pikselden daha az yüksekliğe sahip olmadığı için 480 piksel iyi görünüyor.

@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { 
    html{
        -webkit-transform: rotate(-90deg);
           -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
             -o-transform: rotate(-90deg);
                transform: rotate(-90deg);
        -webkit-transform-origin: left top;
           -moz-transform-origin: left top;
            -ms-transform-origin: left top;
             -o-transform-origin: left top;
                transform-origin: left top;
        width: 320px; /*this is the iPhone screen width.*/
        position: absolute;
        top: 100%;
            left: 0
    }
}

Screen.lockOrientation() destek o sırada evrensel olandan daha az olsa da (Nisan 2017) bu sorunu çözer:

https://www.w3.org/TR/screen-orientation/

https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation

Kullanıcıya telefonunu portre moduna geçirmesini söyleme fikrini seviyorum. Burada bahsedildiği gibi: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ... ama JavaScript yerine CSS kullanmak.

Belki yeni bir gelecekte, kullanıma hazır bir çözüme sahip olacak ...

Mayıs 2015'e gelince,

bunu yapan deneysel bir işlevsellik vardır.

Ancak yalnızca Firefox 18+, IE11 + ve Chrome 38+ üzerinde çalışır.

Ancak, henüz Opera veya Safari'de çalışmaz.

https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation#Browser_compatibility

Uyumlu tarayıcılar için şu anki kod:

var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;

lockOrientation("landscape-primary");

Oryantasyon değişikliğinin etkili olmasını engelleyemeseniz de, diğer cevaplarda belirtildiği gibi değişiklik yapamazsınız.

Öncelikle aygıt yönünü veya yeniden yönlendirmesini tespit edin ve JavaScript kullanarak kaydırma öğenize bir sınıf adı ekleyin (bu örnekte gövde etiketini kullanıyorum).

function deviceOrientation() {
  var body = document.body;
  switch(window.orientation) {
    case 90:
      body.classList = '';
      body.classList.add('rotation90');
      break;
    case -90:
      body.classList = '';
      body.classList.add('rotation-90');
      break;
    default:
      body.classList = '';
      body.classList.add('portrait');
      break;
  }
}
window.addEventListener('orientationchange', deviceOrientation);
deviceOrientation();

Ardından aygıt yataysa, gövde genişliğini görünüm alanı yüksekliğine ve gövde yüksekliğini görünüm alanı genişliğine ayarlamak için CSS'yi kullanın. Ve biz dönüşümdeyken dönüşüm kaynağını belirleyelim.

@media screen and (orientation: landscape) {
  body {
    width: 100vh;
    height: 100vw;
    transform-origin: 0 0;
  }
}

Şimdi, gövde elemanını yeniden yönlendirin ve yerine kaydırın (çevirin).

body.rotation-90 {
  transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
  transform: rotate(-90deg) translateX(-100%);
}

// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px  
html {
  width: 320px;
  overflow-x: hidden;
}

Bu veya benzeri bir CSS çözümü, en azından peşindeyseniz, düzeninizi koruyacaktır.

Kök çözüm, aygıtları sınırlamaya çalışmak yerine yeteneklerini açıklamaktadır. Cihaz size uygun bir sınırlamaya izin vermiyorsa, tasarım esasen eksik olduğundan, basit bir kesmek daha iyidir. Ne kadar basit o kadar iyi.

Kahvede kimsenin ihtiyacı varsa.

    $(window).bind 'orientationchange', ->
        if window.orientation % 180 == 0
            $(document.body).css
                "-webkit-transform-origin" : ''
                "-webkit-transform" : ''
        else
            if window.orientation > 0
                $(document.body).css
                    "-webkit-transform-origin" : "200px 190px"
                    "-webkit-transform" : "rotate(-90deg)"
            else
                $(document.body).css
                    "-webkit-transform-origin" : "280px 190px"
                    "-webkit-transform" : "rotate(90deg)"

@ Grumdrig'in cevabından esinlenilmiştir ve kullanılan talimatların bazıları işe yaramayacağı için, başka biri tarafından gerekirse aşağıdaki komut dosyasını öneririm:

    $(document).ready(function () {

      function reorient(e) {
        var orientation = window.screen.orientation.type;
        $("body > div").css("-webkit-transform", (orientation == 'landscape-primary' || orientation == 'landscape-secondary') ? "rotate(-90deg)" : "");
      }
    $(window).on("orientationchange",function(){
        reorient();
    });
      window.setTimeout(reorient, 0);
    });

Ben benzer bir sorun var, ama manzara yapmak için ... Aşağıdaki kod hile yapması gerektiğine inanıyorum:

//This code consider you are using the fullscreen portrait mode
function processOrientation(forceOrientation) {
  var orientation = window.orientation;
  if (forceOrientation != undefined)
    orientation = forceOrientation;
  var domElement = document.getElementById('fullscreen-element-div');
  switch(orientation) {
    case 90:
      var width = window.innerHeight;
      var height = window.innerWidth;
      domElement.style.width = "100vh";
      domElement.style.height = "100vw";
      domElement.style.transformOrigin="50% 50%";
      domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(-90deg)";
      break;
    case -90:
      var width = window.innerHeight;
      var height = window.innerWidth;
      domElement.style.width = "100vh";
      domElement.style.height = "100vw";
      domElement.style.transformOrigin="50% 50%";
      domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(90deg)";
      break;
    default:
      domElement.style.width = "100vw";
      domElement.style.height = "100vh";
      domElement.style.transformOrigin="";
      domElement.style.transform="";
      break;
  }
}
window.addEventListener('orientationchange', processOrientation);
processOrientation();

<html>
<head></head>
<body style="margin:0;padding:0;overflow: hidden;">
  <div id="fullscreen-element-div" style="background-color:#00ff00;width:100vw;height:100vh;margin:0;padding:0"> Test
  <br>
  <input type="button" value="force 90" onclick="processOrientation(90);" /><br>
  <input type="button" value="force -90" onclick="processOrientation(-90);" /><br>
  <input type="button" value="back to normal" onclick="processOrientation();" />
  </div>
</body>
</html>

Web sitemden bir eğitim ve çalışma örneği için buraya tıklayın .

Artık jQuery Mobil Ekran Yönü'ne bakmak için kesmek kullanmanıza gerek yok, aslında PhoneGap kullanmadığınız sürece artık PhoneGap kullanmamalısınız.

Bu işi 2015 yılında yapabilmek için şunlara ihtiyacımız var:

• Cordova (4.0'ın üzerinde bir şey olsa da herhangi bir sürüm daha iyidir)
• PhoneGap (PhoneGap'i bile kullanabilirsiniz, eklentiler uyumludur)

Ve Cordova sürümünüze bağlı olarak bu eklentilerden biri:

• net.yoik.cordova.plugins.screenorientation (Cordova <4)

cordova eklentisi net.yoik.cordova.plugins.screenorientation ekleyin

• cordova eklentisi cordova-eklentisi-ekran yönelimi ekle (Cordova> = 4)

cordova eklentisi cordova-eklentisi-ekran yönelimi ekle

Ekran yönünü kilitlemek için sadece bu işlevi kullanın:

screen.lockOrientation('landscape');

Kilidi açmak için:

screen.unlockOrientation();

Olası yönelimler:

• portrait-Primary Yönlendirme birincil portre modunda.

• portre-ikincil Yön, ikincil portre modundadır.

• manzara-birincil Yön, birincil manzara modundadır.

• manzara-ikincil Yön, ikincil manzara modundadır.

• portre Yön dikey ya da dikey ikincil (sensör).

• manzara Yön, yatay-birincil veya yatay-ikincil (sensör) şeklindedir.