"Yatay" yönlendirme modunu zorla

91

Uygulamam için "manzara" modunu zorlamaya çalışıyorum çünkü uygulamam kesinlikle "portre" modu için tasarlanmadı. Bunu nasıl yapabilirim?

javascript device-orientation

— kullanıcı1599537
kaynak

93

Artık HTML5 webapp manifestiyle mümkün. Aşağıya bakınız.

Orijinal cevap:

Bir web sitesini veya web uygulamasını belirli bir yönde kilitleyemezsiniz. Cihazın doğal davranışına aykırıdır.

Cihaz yönünü aşağıdaki gibi CSS3 medya sorgularıyla tespit edebilirsiniz :

@media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}

@media screen and (orientation:landscape) {
    // CSS applied when the device is in landscape mode
}

Veya aşağıdaki gibi bir JavaScript yön değişikliği olayını bağlayarak:

document.addEventListener("orientationchange", function(event){
    switch(window.orientation) 
    {  
        case -90: case 90:
            /* Device is in landscape mode */
            break; 
        default:
            /* Device is in portrait mode */
    }
});

12 Kasım 2014'teki güncelleme: Artık HTML5 webapp manifestiyle mümkün.

Html5rocks.com'da açıklandığı gibi , artık bir manifest.jsondosya kullanarak yönlendirme modunu zorlayabilirsiniz .

Bu satırı json dosyasına eklemeniz gerekir:

{
    "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
    "orientation":  "landscape", /* Could be "landscape" or "portrait" */
    ...
}

Ve manifest'i html dosyanıza şu şekilde eklemeniz gerekir:

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

Yönlendirme modunu kilitlemek için web uygulaması manifestindeki desteğin tam olarak ne olduğundan emin değilim, ancak Chrome kesinlikle orada. Bilgiye sahip olduğumda güncellenecek.

— Rémi Breton
kaynak

1

Evet, web uygulamaları da. Web sitenizi iPhone veya iPad'deki ana ekrana "kaydetseniz" bile, web uygulaması yönünü değiştirecektir.

— Rémi Breton

2

Caniuse.com'a göre, bildirimler Android 4.1'den beri kullanılabilir. Bkz caniuse.com/#feat=offline-apps

— Rémi Breton

1

Manifestin çağrılıp çağrılmadığını nasıl anlarım? Bu benim için çalışmıyor ve manifesto, bağlı olduğu index.html ile aynı yerde olmasına rağmen, geliştirme araçlarımın Ağına yüklenemiyor.

— Ian S

3

Chrome'da artık İnceleme modunda "Uygulama" sekmesini kontrol edebilirsiniz, json dosyanıza ve bununla ilgili bilgilere doğrudan bağlantı içeren bir "Manifest" sayfası vardır.

— drskullster

1

@ RémiBreton - hala bu bilgiyi mi arıyorsunuz, bu yüzden güncelleme yapabilir misiniz? Yıllardır sabırla bekliyoruz !

— ashleedawg

46

screen.orientation.lock('landscape');

Manzara moduna geçmeye ve kalmaya zorlar. Nexus 5'te test edildi.

http://www.w3.org/TR/screen-orientation/#examples

— Levye
kaynak

3

Varsayılan internet tarayıcısını (krom değil) kullanarak Android'de çalışmıyor - herhangi bir fikir?

— Antonios Tsimourtos

6

Safari (iOS ve macOS) için uygulanmadı: caniuse.com/#feat=screen-orientation

— MBach

3

Kısa bir not, bu yalnızca tam ekran moduna girdikten sonra çalışır.

— Thane Brimhall

2

Bu yöntem Mozilla tarafından önerilmemektedir: developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation Ayrıca çok zayıf bir tarayıcı uyumluluğu var

— Fernando Garcia

1

Bu, chrome'da tam ekran modunda bile çalışmıyor: |

— Shamshirsaz. Navid

23

Bunun gibi bazı css kullanıyorum ( css hilelerine göre ):

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

— Pomber
kaynak

3

Bu cevabı kullandım .. tek yapmam gereken medya sorgusunu yerine olarak landscapedeğiştirmek portraitve beklendiği gibi çalışıyor@media screen and (orientation: portrait)

— ymz

Yanıtı gelecekteki insanlara yardım etmek için düzenledi. Döndürme, mevcut mod olduğu zaman uygulanmalıdır portrait(böylece geçiş yapılabilir landscape).

— lfarroco

Teşekkürler. Bunun gibi bir şey arıyordum.

— underdog

Bunu page-id-xxx yoluyla yalnızca tek bir sayfaya nasıl uygulayabilirim?

— Homer

0

Aynı sorunu yaşadım, eksik bir manifest.json dosyasıydı, tarayıcı bulunamazsa, dosyayı belirtmezseniz veya yanlış bir yol kullanmazsanız, yönelimle en uygun karar verir.

Html başlıklarında manifest.json'ı doğru bir şekilde çağırmayı düzelttim.

HTML başlıklarım:

<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">

Ve manifest.json dosyasının içeriği:

{
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
  {
    "src": "android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }
}

Sık kullanılan simgelerinizi ve simgelerinizi oluşturmak için bu web aracını kullanın: https://realfavicongenerator.net/

Bildirim dosyanızı oluşturmak için şu adresi kullanın: https://tomitm.github.io/appmanifest/

PWA'm harika çalışıyor, umarım yardımcı olur!

— Miguel Montes de Oca
kaynak